@font-face {
    font-family:'Quicksand';
    font-style: normal;
    font-weight: 100;
    src: 
      local('Quicksand'),         
      local('Quicksand'),  
      url(https://meteo365.es/fonts/quicksand.woff2) format('woff2'), 
      url(https://meteo365.es/fonts/quicksand.woff) format('woff');   
}

@font-face {
    font-family:'Quicksand';
    font-style: normal;
    font-weight:  800;
    src: 
      local('Quicksand Bold'),         
      local('Quicksand-Bold'),  
      url(https://meteo365.es/fonts/Quicksand-Bold.woff2) format('woff2'), 
      url(https://meteo365.es/fonts/Quicksand-Bold.woff) format('woff');   
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

body { font-family: 'Quicksand', sans-serif; margin: 0; padding: 0; color:white; font-size: 15px; background-color:#0a4e70; }
/*html, body { overflow-x: hidden; }*/
header { position: fixed; top:0px; left:0px; width: 100%;  height: 50px; z-index: 99998; background: linear-gradient(#052738, #0a4e70); z-index: 9999999998; }
header a { color: white; text-decoration: none;}
#headerbereich { width:100%;max-width:1200px; margin: 0 auto; position: relative;}
#headerbereich svg { vertical-align: sub; }
/*#logo { height: 16px; padding: 10px; float: left; background-image: url(../img/meteo365.png); background-size: 180px 38px; background-position: center center; width: 180px; background-repeat: none; border-radius: 30px; position: relative; top: 10px; left: 0px; z-index: 999999;  margin-left:0;}*/

#logo { font-size: 20px; height: 34px; line-height: 30px; width: 160px; color: white; font-weight: 200; float: left; text-shadow: 0px 0px 4px rgba(0, 0, 0, .3); text-align: center; letter-spacing: 2px; border-radius: 30px; position: absolute; top: 7px; left: 10px; z-index: 999999; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); background-color: #f4a932; border: 1px solid #f29400; }

#headercontent { width: calc(100% - 220px); max-width: 1000px; float: right;  }

footer {  width: 100%;  margin: 70px auto 0; background: linear-gradient(#0a4e70,#052738); height: 120px;  color: #eee; text-align: center; font-size: 12px;  line-height: 30px;}
footer a { text-decoration: none; color: #eee;}

#footup { width:100%; max-width:900px; margin: 20px auto 0;   }
#footbottom { width:100%; max-width:700px; margin: 10px auto 0;   }

#facebook { margin:10px; background-image: url(../images/facebookw.png); float:left;  background-size: 20px 20px; padding:10px; background-position: center; background-repeat: no-repeat; background-color:#f29400; width:20px; height:20px; border-radius: 50%; box-shadow: 1px 1px 4px #000; }
#twitter { margin:10px;  float:left;  background-size: 20px 20px; padding:10px; background-position: center; background-repeat: no-repeat; background-color:#f29400; width:20px; height:20px; border-radius: 50%; box-shadow: 1px 1px 4px #000; }
#seguir { float:left; margin:10px; line-height:38px;}

#fotterleft { width: 300px; display:inline-block; font-size:18px; }
#fotterright { width:580px; display:inline-block; font-size:14px; top:-25px; position:relative;  }

#contact { display:inline-block; margin:0 10px; }
#contact2 { display:inline-block; margin:0 10px; }

#buttonwebcams { border-radius: 20px; border: none; padding: 10px; color: white; box-shadow: 1px 1px 4px #000; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3); font-size: 14px; letter-spacing: 1px; background-color: #f29400; float: left; }
#buttonwebcams:hover { background-color: #052738; }    

.wetterspanien a {color: white;}
.contentinhalt { max-width:1200px; width:calc(100% - 10px); margin: 0 auto; padding: 2px 0; }
.contentinhalt2 { max-width:1200px; width:100%; margin: 0 auto; }
.content { width:100%;max-width:1200px;margin:60px auto 0; padding: 0px;   }
.content1 { width:100%;margin:60px auto 0; padding: 0px; background: rgb(10,78,112);background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);  }
.contentinhaltbackground { width:100%;margin:20px auto 0; padding: 0px; background: rgb(10,78,112);background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);  }
.content1taf {  width:100%; margin:10px auto 0; padding: 0px; background: rgb(10,78,112); background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); }
.content2 { width:calc(100% - 10px); padding: 0 5px; }
.content3 { width:100%;margin:60px auto 0; padding: 10px 0px; background: rgb(10,78,112);background: linear-gradient(90deg, #f29400 0%, #fdd25f 100%);   }

#contentcams { width:calc(100% - 320px); max-width:1280px; margin:0 20px 0 0; float:left;  height: auto;  } 
#contentcams-start {flex: 1 1 auto;  min-width: 0; overflow-x: hidden;   } 
#sidebarcams {   width: 300px;  /*display:inline-block;*/ float: left; margin: 0 0; }
#sidebarleft {  width:calc(100% - 320px); float:left; margin: 0 20px 0 0; }
#sidebarleft2 {  width:calc(100% - 320px); float:left; margin: 0 20px 0 0; }

.layout{
  display: flex;
  align-items: stretch;    
  gap: 16px;
}


.ad-wrap-fluid{
  display:block;
  width:100%;
  max-width:100%;
  margin:16px auto;
}

@media (max-width: 1024px){
  .content1, .content2, .contentinhalt, .ads, .showads {
    overflow: visible !important;
  }
}

#sidebarcams2{
  flex: 0 0 300px;
  width: 300px;
}

#sidebarcams2 .sticky{
  position: -webkit-sticky !important; /* Safari */
  position: sticky !important;
  top: 72px !important;                /* an Headerhöhe anpassen */
  z-index: 5;
  height: max-content;
}



/* Werbeblock-Basis, damit nichts scrollt */
.ad-wrap{
  max-width: 100%;
  margin: 16px auto;
  overflow: hidden;
  line-height: 0;
}

/* Sichtbarkeit Desktop/Mobile */
.desktop-only{ display: block; }
.mobile-only{  display: none; }

@media (max-width: 860px){
  /* Einspaltig auf Mobil */
  .layout{ display: block; }
  #sidebarcams2{ display: none; }         /* Sidebar auf Handy ausblenden */
  .desktop-only{ display: none !important; }
  .mobile-only{  display: block !important; }
	html, body { overflow-x: hidden; }
}


/* WICHTIG: Sticky Vorfahren dürfen kein overflow:auto/hidden/scroll haben */
.content1, .content2, .contentinhalt, .ads, .showads{
  overflow: visible !important;  /* falls irgendwo overflow gesetzt war */
}




@media (max-width:1150px)  { #sidebarleft {  width:100%; margin: 0; } /*#sidebarcams {  width:100%; margin: 10px auto; }*/ }
@media (max-width:810px)  { #sidebarleft2 {  width:100%; margin: 0; }  }

#camlugar { color: white; font-size: 18px; text-align: left; margin: 20px 0; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); padding: 5px 10px; border-radius: 10px; display: table; text-shadow: 2px 3px 3px rgba(14,30,46,0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }

#camlugar a { color: white; font-size:16px;}
.ort::before{
       /*content: '\F3E9';
       display: inline-block;
       width: 12px;
       height: 12px;*/
       /*-moz-border-radius: 7.5px;
       -webkit-border-radius: 7.5px;*/
       /*border-radius: 7.5px;*/
       /*background-color: white;*/
    }


h1 { color: white; font-weight: lighter; letter-spacing: 2px; padding: 5px ; margin: 5px 0; width: auto; text-align: center; font-size: 18px;}
h1.news { color:#0a4e70; font-weight: bold; letter-spacing: 2px; padding: 0px ; margin: 5px 0 10px; width: auto; text-align: left; font-size: 20px;}
h2 {  padding: 5px ; margin: 5px 0; width: auto; font-weight: normal;}
h2.news {  padding: 2px ; margin: 5px 0; width: auto; font-weight: normal;  font-size:16px;}
h2.artikel {  padding: 5px ; margin: 5px 0; width: auto; font-weight: normal; font-size:21px;}
h3 { color: white; font-size: 17px;}
h3 a { color: white;}
h3.news { color: #0a4e70; font-size: 17px;}
h3.video a { background: rgba(7,188,207,1); padding: 5px 10px; font-size: 14px; color: white; text-align: center; width: auto; display: table; border-radius:20px; margin: 20px 5px; float: left;}
h4 { width:calc(100% - 20px);  padding: 5px ; margin: 0; font-weight: normal; font-size: 16px; background: rgba(10,78,112,0.4); text-align: center;}
h5 { padding: 5px ; margin: 0; width: auto; font-weight: bold; font-size: 14px;}
h2#airport { width: 90%; padding: 5px 0px; text-align: center; font-size:16px; color:#F6F1F1; opacity: 1; /*line-height:35px;*/  font-weight: normal; letter-spacing: 2px; margin: 0 auto;}
h2#airport2 { width: 90%; padding: 5px 0px; text-align: center; font-size:16px; color:#F6F1F1; opacity: 1; /*line-height:35px;*/  font-weight: normal; letter-spacing: 2px; margin: 5px auto 0; background-color: rgba(0,0,0,0.2); }

h2.cams2 { color: white; font-weight: lighter; letter-spacing: 2px; padding: 5px ; margin: 5px 0; width: auto; text-align: center; font-size: 18px; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); }

h2.textcam {
  color: white;
  font-weight: lighter;
  letter-spacing: 2px;
  padding: 5px;
  margin: 15px 0 10px;
  width: auto;
  text-align: center;
  font-size: 18px;
    background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);

}

#socialbutton { margin:12px 6px; float:left;  padding:4px;  width:20px; height:20px; color: white; }

#livecam_video {max-width: 1280px; width: 100%;}
video {width: 100%;height: auto;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
#livecam_video2 { width: 100%;}
#livecam_videok { width: 100%;max-width: 1000px}

#bild-cam { max-width: 1000px; width: 100%; margin: 1px auto;}
#bild-cam img { max-width: 1000px; width: 100%; }

#werbungum { margin: 20px auto 0;}  

#adblockcontent { width: 90%; max-width: 600px;  color: white; margin: 100px auto 0;  text-align: center;  }
#adblockcontent svg {margin: 10px auto; width: 70px; height: 70px; color:rgba(7,188,207,1); }
#text1 { font-size: 30px;  margin: 20px auto 40px;}
#text2 { font-size: 20px; line-height: 40px;}


ul#menutop { list-style-type: none; margin: 0; padding: 0; font-size:16px; }
ul#menutop li { float: left; border-radius: 20px; margin: 2px 10px 0; padding: 2px 4px; }
a {  color: #0a4e70; text-decoration: none }

ul#nav { overflow: hidden; width: auto;  }

ul#nav { width: calc(100% - 50px); list-style: none; }

ul#nav li { float: left; font-size: 13px; }

ul#nav li.more { width: 40px; text-align: left; display: none; float: left; }

ul#nav li.more:hover ul#overflow {
  opacity: 9999999;
  visibility: visible; position: absolute; 
}

ul#nav li a,
ul#nav li span {
  display: block;
  text-decoration: none;
  padding: 0 10px 10px;
  cursor: pointer;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
}


ul#nav #overflow {
  opacity: 0;
  visibility: hidden;
  position: absolute;
 /*text-align: left;
 -webkit-transition-duration: .3s;
  transition-duration: .3s;*/
    width: 150px; margin-left: -10px;
}

ul#nav #overflow li { float: none; }

ul#nav #overflow li a {
  background: white;
}

ul#nav #overflow li a { background: #052738; line-height: 31px; }
ul#nav #overflow li a:hover { background: #052738; }

ul#nav li.more:hover ~ #logo {
    display: none;
}

.dropbtn { background-color: rgba(7,188,207,0); color: #0a4e70; padding: 1px; font-size: 16px; border: none; }
#dropdown svg { vertical-align: baseline; }
#dropdown { position: absolute; display: inline-block; float: right; padding-top: 3px; top: 10px; right: 5px;}
.dropdown-content { display: none; position: relative; background-color: #f1f1f1; min-width: 40px; height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 9999999999; }
.dropdown-content a { color: #0a4e70; padding: 12px 5px; text-decoration: none; display: block; }
#dropdown:hover .dropdown-content {display: block; visibility: visible; z-index: 9999999999;}

#wetterstationbox { width:100%; max-width:300px; padding: 10px 0; border-radius: 10px; color: white; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); }
#wetterstationbox2 { width:100%;  padding: 10px 0; border-radius: 10px; color: white; background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%); }

.card { margin: 2px 20px 0; width: 100px; height: 100px; padding: 2px; float: left;  box-shadow: inset 1px 1px 30px #0e1e2e; border-radius: 50%;}
.compass { position: relative; width: 100%; height: 100px; }
.compass & > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#arrowSVG { position: absolute; top:0px;}  
.compass svg { filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg) opacity(1); width: 100px; height: 100px; position: absolute; }      
.compass-content { color: white; }
.compass-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 20px; font-weight: bold;}
.unit {font-size: 14px;font-weight: 100;}
        #winddirection {font-size: 20px }

#progress {width: 200px; height:200px; float: left; margin: 20px 20px 0;}
#progress path { stroke-linecap: round; stroke-width: 4; }
#progress path.grey { stroke: rgba(255,255,255,0.3); }
#progress path.blue { stroke: url(#gradient); stroke-dasharray: 190; stroke-dashoffset: 190; animation: dash 3s ease-out forwards;  }
#progress svg { margin-top: -20px; }


table#wetterstation1 { width: 100%; font-size: 11px;}
table#wetterstation1 tr td { text-align: center; width: 33%;}
table#wetterstation1 tr td big { font-size: 22px; }

table#wetterstation2 { width: 100%; font-size: 11px; margin-top: 20px;}
table#wetterstation2 tr td { text-align: center; width: 33%;}
table#wetterstation2 tr td big { font-size: 22px; }

table#wetterstation3 { width: 50%; max-width: 315px; float: left; font-size: 11px;}
table#wetterstation3 tr td { text-align: center; width: 33%;}
table#wetterstation3 tr td big { font-size: 22px; }

.bfscalac { padding: 5px; width: 25px; height: 25px; border-radius: 50%; display: inline-block; font-size: 22px; text-shadow: 2px 3px 3px rgba(14,30,46,0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
.bfscalac2 { padding: 4px; width: 20px; height: 20px; border-radius: 50%; display: inline-block; font-size: 16px; text-shadow: 2px 3px 3px rgba(14,30,46,0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }
.winddirectionsmall { font-size: 11px; letter-spacing: 1px;}

#box1 { width: 100px; float: left; text-align: center;}
.wettercamstemp { font-size:28px; margin: 5px 0 5px;}
#emtemp {font-weight: bold; }
#box2 { max-width: 300px; width: 100%; text-align: center; margin: 13px 0 0;}
#box2a { max-width: 632px; width: calc(100% - 244px);  text-align: center; float: left; margin: 20px 0 0;}

#emzeit  {font-weight: bold; }

hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), #3d6d84, rgba(0,0,0,0));
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), #3d6d84, rgba(0,0,0,0));
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), #3d6d84, rgba(0,0,0,0));
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), #3d6d84, rgba(0,0,0,0)); 
}

.chart-container { position: relative; height: 120px; width: 90%;  margin: auto;  }
.chart-containerr { position: relative; height: 160px; width: 90%;  margin: -10px auto 0;  }

.chart-containerw { position: relative; height: 74px; width: 90%;   margin: -5px auto 10px;  }

.chart-container2 { height: 335px; width: 100%; /* border: 10px solid #f1f1f1; */ position: relative; margin: auto 0 7px 10px; }

.chart-containerhoras { position: relative; height: 80px; width: 100%; max-width: 1200px; margin: auto;  }
.chart-containerhoras2 { position: relative; height: 100px; width: 100%; max-width: 1200px; margin: -20px 0 0;  }
.chart-containerhoras3 { position: relative; height: 100px; width: 100%; max-width: 1200px; margin: -40px 0 0;  }



#rainchart { width: 100%;}
table.regen {width: 100%;  }
table.regen tr td { text-align: center; width: 16%;}

.tear { display: block;
  width: 22px;
  height: 22px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid #36a2eb; background-color: #36a2eb/*#46A7C7*/; color: white; font-size: 14px;
  transform: rotate(-45deg); font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin: auto;
}


#rachastable { }
#rachastable table { width: 100%; height: 50px;}
#rachastable table tr td { text-align: center; width: 16%; color: white; }
#rachastable table tr td .racht { text-align: center; width: 16%; color: white;  background-color: #027a7a; border-radius: 50%; padding: 4px 8px; text-shadow: 2px 3px 3px rgba(14,30,46,0.3);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}

#windttable table { width: 100%; height: 50px; margin: 20px 0 35px;}
#windttable table tr td { text-align: center; width: 16%; color: white; }
#windttable table tr td .windt { text-align: center; width: 16%; color: white;  background-color: #0e9e9e; border-radius: 50%; padding: 4px 8px; text-shadow: 2px 3px 3px rgba(14,30,46,0.3);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}

    #forecast24 { text-align: center; font-size: 15px; color: #fff; font-weight: bold; border-top: 1px solid #052738; padding-top: 5px; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px;}
    table#weatherforecast24{ width: 1240px; color: #fff; margin-bottom: 10px;} 
    table#weatherforecast24 tr td { width: 70px; color: #fff; text-align: center; padding: 0px 0px 5px;} 
    table#weatherforecast24 tr td.uhrzeit { font-size: 11px;} 
    table#weatherforecast24 tr td.horanieve { font-size: 14px; color:#662483;} 
    table#weatherforecast24 tr td.horaregen { font-size: 14px; color:#004899;}
    table#weatherforecast24 tr td.wind { padding: 0 12px 5px; background-color: rgba(255,255,255,0.1); }
    table#weatherforecast24 tr td.boe { padding: 0 12px 5px; background-color: rgba(255,255,255,0.1); }
    table#weatherforecast24 tr td.wave { padding: 0 12px 5px; background-color: rgba(8,155,171,0.4); }
    table#weatherforecast24 tr.fix td { height: 30px; border-top: 1px dotted rgba(0,0,0,0.6); margin-top: 5px; }
    .boe { color: darkorange; font-weight: bold; }
    #fix {width: 307px; position: absolute; margin-top: -7px; margin-bottom: 10px; color: lightgray; font-size: 10px; letter-spacing: 2px; text-align: left; margin-left: 10px; }
    #fix2 {width: 300px; position: absolute; margin-top: -7px; margin-bottom: 10px; color: lightgray; font-size: 14px; letter-spacing: 2px; text-align: left; margin-left: 10px; }
    
.metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto; }
#metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto 10px; color: #0a4e70; }
#metarmitte2 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto 10px; color: white; }
.textleft2 { max-width:200px; width: 100%; height: auto; min-height: 150px; text-align: center; background-color: #FAFAFA; padding:  10px 10px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); color: #0a4e70; }
.textleft3 { max-width:250px; width: 100%; height: auto; min-height: 115px; text-align: center; background-color: rgba(0,0,0,0.2); margin: 5px 0; padding:  5px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); color: white; }

.tower { background:linear-gradient(180deg, #0a4e70 0%, #089bab 100%); width: 40px; height: 40px; text-align: center; border-radius: 50%; margin: 6px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower img { width: 30px; margin: 5px;}

.tower2 { background:linear-gradient(180deg, #0a4e70 0%, #089bab 100%); width: 40px; height: 40px; text-align: center; border-radius: 50%; margin: 6px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower2 svg { width: 26px; margin: 4px; color: white; /*transform: rotate(45deg);*/ }

.tower3 { background:linear-gradient(180deg, #0a4e70 0%, #089bab 100%); width: 40px; height: 40px; text-align: center; border-radius: 50%; margin: 6px auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); }
.tower3 svg { width: 20px; margin: 7px; color: white; }
#metarflightcat { margin: 0 auto;}

#daten { margin: 30px auto 30px; font-size: 12px; padding: 2px 0; text-align: center; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(7,188,207,0.4), rgba(0, 0, 0, 0)); }

#tmax1, #tmax2, #tmax3 { font-weight: bold; font-size: 24px; padding: 5px; width: 45%; float: left; }
#tmin1, #tmin2, #tmin3 { font-weight: bold; font-size: 16px; padding: 5px; width: 45%; float: left; line-height: 26px; }

#datum1,#datum2,#datum3 { font-weight: bold;}
#nieder1,#nieder2,#nieder3 { clear: both; width: 100%; margin: 2px 0 0; letter-spacing: 2px; }

.svg-icon {
  transform: rotate(90deg);
}

.green path {
  fill: darkgreen;
}

.blue path {
  fill: navy;
}

.golden {
  fill: darkorange;  opacity: 0.4;
}
.leaflet-bottom {
  bottom: 0;
    display: none; }
    
    
#wetterdaten { width: 100%; overflow: scroll; }
#wetterdaten::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#wetterdaten {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.legend { width: 20px;
text-align: center;
font-size: 10px;
position: absolute;
top: 28px;
left: -20px;
line-height: 11px; color: white; font-weight: bold;}


#lasttemp { background-color: #ff3784; padding: 2px 1px; width: 11px; display: block; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3);}
#lastrachas { background-color: #027a7a; padding: 2px 1px; width: 11px; display: block; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3);}
#lastwind { background-color: #0e9e9e; padding: 2px 1px; width: 11px; display: block; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3);}
#lastrainleged { background-color: #36a2eb; padding: 2px 1px; width: 11px; display: block; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3);}

.cardwind {width: 144px;}
.cardsun { width: 300px;  margin: 5px auto;}
#uves2 { width: 250px; float: left; text-align: center;} 


#watertemp { width: 300px; margin: 15px 0 0 10px; /*border: 10px solid #f1f1f1;*/ border-top: none; color: #0e1e2e; float: left; }

.watertemperatur { width: 46px; height: 46px; border-radius: 50%; background-color: #0e1e2e; z-index: 40; position: relative; margin: 10px auto;  }
img.watertemp { width: 40px; padding: 2px 2px 0 0; }


#tempw { color: white; font-size: 22px; text-align: center; line-height: 56px; width: 60px; display: block;} 
#wavesw { color: white; font-size: 22px; text-align: center; line-height: 56px; width: 60px; display: block;} 


#martemp1a { width: 200px;   height: 169px;  border-radius: 10px; border: 1px solid #0e1e2e; text-align: center; font-size: 20px; padding: 10px; margin: 10px auto;}
#martemp1a small { font-size: 11px; letter-spacing: 1px; }
#uves2a { width: 250px;  text-align: center; margin: 25px auto 5px;} 


#martemp1 { width: 200px; float: left;  height: 169px;  border-radius: 10px; border: 1px solid #0e1e2e; text-align: center; font-size: 20px; padding: 10px;}
#martemp1 small { font-size: 11px; letter-spacing: 1px; }

#wassertemp { line-height: 34px; }

button { background-color: rgba(255,255,255,0); border:none;  }
button svg { width: 20px; height: 20px; color: white;  }

#mapmet {width: 100%; height: 350px; margin: 20px auto;}
#mapstart {width: 90%; height: 500px; margin: 20px auto;}

#contentindex { width: 100%; margin: 20px auto 0;}
.camsortindex { width: 200px; margin: 10px 0 0 10px; padding: 5px 10px; border-radius: 20px; background-color: rgba(25,96,113,0.3); color: #f29400; font-size: 11px; }
.camsortindex2 { width: 150px; margin-top: 10px; text-align: center; padding: 5px 10px; border-radius: 20px; background-color: rgba(25,96,113,0.3); color: #f29400; font-size: 13px; }
.camsortindex3 { width: 120px; margin: 10px 0 0 10px; padding: 5px 10px; border-radius: 20px; background-color: rgba(25,96,113,0.6); color: #f29400; font-size: 11px; }
ul#livecams3 {list-style: none;  margin: 0 auto; width: 100%; padding: 0; }
ul#livecams3  a { text-decoration: none; color: white; } 

.camsortindex4 {   font-size: 16px; letter-spacing: 2px; text-align: left;  color:#0df5ff; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.3); padding: 5px; background-color: rgba(14,30,46,0.3); width: auto; }


.live2 {width: calc(20% - 20px); max-width: 182px; background-color: rgba(25,96,113,0.5); padding: 5px; height: auto; margin: 20px 5px; color: white; text-align: center; border-radius: 20px; float: left; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.live2 img { width: 90%;}
.live2:hover { background-color: rgba(25,96,113,1); }

.backwebcams { border-radius: 20px;  margin: 40px 0 ; padding: 10px; color: white; box-shadow: 1px 1px 4px #000; text-shadow: 2px 4px 3px rgba(0, 0, 0, .3); font-size: 16px; letter-spacing: 1px; background-color: #f29400; float: left;}
.backwebcams a {  color: white; }
    
.cams1 { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 20px 0 0 ; }
.camstart {position: relative; flex: 1; width: 100%; max-width: 260px; margin: 10px;   }


img.imagestart { max-width: 260px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); display: block; border-radius: 5px;}
.camstarttext { color: white; text-align: center;  position: absolute; top:0px; left:0px; width: 100%; background-color: rgba(0,0,0,0.6); padding: 6px 0; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px;  } 

.live { position: absolute; bottom:10px; right:10px; width: 30px; height: 30px; background-color: rgba(0,0,0,0.6); border-radius: 50%; border: 2px solid #0df5ff;
     z-index:9999;  padding: 5px; text-align: center;
}

.live:before {font-family: "Glyphicons Halflings";  content:"\e059"; color:white; z-index:9999; font-size: 20px; }
.livebild { position: absolute; bottom:10px; right:10px; width: 30px; height: 30px; background-color: rgba(0,0,0,0.6); border-radius: 50%; border: 2px solid #0df5ff;
     z-index:9999;  padding: 5px; text-align: center;
}

.livebild:before {font-family: "Glyphicons Halflings";  content:"\e060"; color:white; z-index:9999; font-size: 20px; }


#textwebcam { width: calc(100% - 40px);
margin: 10px auto 0;
padding: 20px;
background: rgb(10,78,112);
background: linear-gradient(90deg, rgba(10,78,112,1) 0%, rgba(7,188,207,1) 100%);
color: white; line-height: 20px; font-size: 16px;
}


#card5 {  width: 296px; margin: 5px 0 0 0;  border-left: 2px solid #02263b; border-right: 2px solid #02263b; display: block; }
#card52 {  width: 296px; margin: 5px 0 0 0;  border-left: 2px solid #02263b; border-right: 2px solid #02263b; display: block; }
#ankunft { color: #f54775; float: left; }
#abflug {  color: #28f915; float: left; }
#ankunft img, #abflug img { vertical-align: middle;}
#results_flights { font-size: 13px; }

#ankunft, #abflug { font-size: 12px; letter-spacing: 1px;
  height: 40px;
  width: 148px;
   background: black;
   background: linear-gradient(225deg, transparent 30px, #02263b 0);
    line-height: 38px;
}
#abflug:hover, #ankunft:hover { font-weight: bolder;}

table#result, table#result2 { border-collapse: collapse;  margin: 25px 0; width: 100%; overflow: scroll; }
table#result tbody tr, table#result2 tbody tr { /*border-bottom: 1px solid #dddddd;*/ background-color: #073b59; }
table#result tbody tr:nth-of-type(even), table#result2 tbody tr:nth-of-type(even) { background-color: #02263b; }
table#result tbody tr:last-of-type, table#result2 tbody tr:last-of-type { border-bottom: 2px solid #02263b; }
table#result tr td, table#result2 tr td { padding: 10px 0; }

table#result2 { color: #f54775;  }
table#result {  color: #28f915;  }


/*#flugadmin { width: 100%; height: 445px; }
@media (max-width:1150px)  { #flugadmin {  height: 300px; } } */

#flugadmin {margin-top: 3px; max-height: 445px; overflow: hidden;}




.menu-wrapper {
	position: relative;
    width: 100%;
	max-width: 1200px;
	height: 541px; 
	margin: 0 auto 20px;
	border: 1px solid #052738;
	overflow-x: hidden;
	overflow-y: hidden;
    
}

.menu-wrapper2 {
	position: relative;
    width: 100%;
	max-width: 1200px;
	height: 795px; 
	margin: 0 auto 20px;
	border: 1px solid #052738;
	overflow-x: hidden;
	overflow-y: hidden;
}

.menuwetter	{
	height: auto; 
	box-sizing: border-box;
	
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch; margin: 0; list-style-type: none;
	}
	.item {
		display: inline-block;
		width: 1200px;
		height: 100%;
		/*border-right: 1px dotted gray;*/
		padding: 5px 10px;
		box-sizing: border-box;
        margin: 0 15px;
	
}

.paddles {
}
.paddle {
	position: absolute;
	top: 0;
	top: 212px;
	width: 3em;
    height: 40px; border-radius: 50%; background-color: rgba(0,0,0,0.2); color: white;
}
.left-paddle {
	left: 0;
}
.right-paddle {
	right: 0;
}
.hidden {
	display: none;
}

.print {
	margin: auto;
	max-width: 500px;
	
	span {
		display: inline-block;
		width: 100px;
	}
}
   
        
        table.wetter {width: 100%; text-align: center; }  
        table.wetter tr td { width: 70px; }
        table.wetter tr.leerestr  { height: 50px;  }
        table.wetter tr td.wind { padding: 0 0 5px; background-color: rgba(255,255,255,0.1); }
        table.wetter tr td.uhrzeit { font-size: 11px;} 

        #tempfix, #wfix, #befix, #bfix, #nfix, #wfix1, #wfix2, #wfix3 { position: absolute; left: 30px; color: lightgray; font-size: 10px; letter-spacing: 2px; text-align: left; border-top: 1px dotted rgba(0,0,0,0.6);  margin-top: 5px; padding-top: 5px; display: block; width: 88%; }       
        
        
        #tempfix {  top: 109px; }       
        #wfix {  top: 190px; }       
        #befix {  top: 315px; }       
        #bfix {  top: 401px;  }       
        #nfix {  top: 473px; }       
        #wfix1 {  top: 545px; border-top: 3px dotted rgba(0,0,0,0.6); }       
        #wfix2 {  top: 623px; }       
        #wfix3 {  top: 721px; }       
        
 .sticky-header {
  position: static;
  position: -webkit-sticky;
  position: sticky;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: .0625em;
  line-height: 1.5em;
  opacity: .72;
  text-transform: uppercase;
  text-transform: none;
  display: inline-block;
  font-size: inherit;
  margin: 0;
  opacity: 1;
  padding: 8px 16px;
  left: 16px;
  z-index: 1;   
        }
        
        
        .watwetter { width: 100px; height: 84px; float: left; margin: 0px; padding: 5px; border: 1px solid black; }
        
         .activea {  background-color: #052738; }
        
        table.wetterprediccion { width: 100%; }
        table.wetterprediccion thead tr td { text-align: center; border-bottom: 1px solid black; padding: 0 0 5px 0; }
        table.wetterprediccion tr td.regen { width: 60%;}
        table.wetterprediccion tr td.winddia { text-align: center; width: 60%;}
        table.wetterprediccion tr td.maxtemp { font-size: 18px;  width: 40%;}
        table.wetterprediccion tr td.mintemp { font-size: 14px; width: 40%;}


.info_webcam { width: 100%;}
.info_webcam_left { float: left; width: calc(100% - 320px);  }
.info_webcam_left img { width: 100%; border-radius: 5px;  }
.info_webcam_right { float: left; width: 300px; margin-left: 20px; line-height: 30px; color: white; }
.info_webcam_icon { width: 20px; height: 20px; border-radius: 50%; background-color: #0099c6; border:1px solid white; color: white; text-align: center; line-height: 20px; padding: 2px; font-weight: bold; float: left;}
.info_webcam_text {  margin-left: 5px; float: left;}

.info_webcam_text_all { float: left; margin: 10px 0;}


/*.tbg { color: white; mix-blend-mode: difference;}*/








    .responsive-banner {
  display: inline-block;
  height: 250px;
  width:300px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
	background-image: linear-gradient(to bottom right, #589FE5, rgba(7,188,207,1));
	background-repeat: no-repeat;
  text-align: left;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.responsive-banner2 {
  display: block; margin: 0 auto 10px;
  height: 160px;
  width:90%; max-width: 600px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
	background-image: linear-gradient(to bottom right, #589FE5, rgba(7,188,207,1));
	background-repeat: no-repeat;
  text-align: left;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.container-envelope {
  max-width: calc(100%);
  padding: 15px;
  color: #fff;
   display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  min-height: 20px;

}
.col-xs-12 {
  position: absolute;
  bottom: 5px;
  left: 10px;
  line-height: 33px;
}

.container-envelope p {
    clear: both;
    margin: 1em 0 0.5em;
    margin: 0;
    padding: 0;
    color: #ffd966;
    position: relative;
    word-wrap: break-word;
  font-size: 20px;
  text-transform: uppercase;
}

 .container-envelope a.more-link {
    background-color: rgba(255, 255, 255, 0.35);
    display: inline-block;
    padding: 12px 18px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 16px;
    text-align: center;
    border: none !important;
    position: relative;
    border-radius: 30px;
  text-transform: uppercase;
    -webkit-transition: .1s all ease-in-out;
    -moz-transition: .1s all ease-in-out;
    -o-transition: .1s all ease-in-out;
    transition: .1s all ease-in-out;
}
 .container-envelope a.more-link:hover {
  background-color: rgba(255, 255, 255, 0.50);
}
.container-envelope svg, .container-envelope img {
  fill: rgba(0, 0, 0, 0.1);
  position: absolute;
}
.container-envelope img {
  max-width : 70%; top: 0; right: 0;
}
.cirle-a {
  bottom: -80px;
  left: -80px;
}
.cirle-b {
  top: -30px;
  right: 70%;
}
.cirle-c {
  top: -330px;
  right: -300px;
}
.cirle-d {
  top: 195px;
      right: 145px;
}


.link-container {
  text-align: center;
}
.link-container a.more-link {
  background-color: #90b0bf;
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  line-height: 1.5;
  text-decoration: none;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 1px;
}




#bannerpetite { float: right; width: 300px;}
.bannerpetitetext {  text-align: right; font-size: 10px; border-bottom:1px solid #f2f2f2; color:#f2f2f2; letter-spacing: 2px; }


/* WERBUNG */

/* billboard */
#div-gpt-ad-1756905801531-0 {
    width: 100%;
    max-width: 970px;
    min-height: 90px;    
    margin: 0 auto;
  }




#webcam-wrapper {
    position: relative; /* nötig, damit das Overlay korrekt darüber liegt */
  }
  .ad-banner-overlay {
    position: absolute;
    inset: 0;
    display: none;            /* standardmäßig versteckt */
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,0.55); /* halbtransparentes Overlay */
    z-index: 9999;
    text-align: center;
  }
  .ad-banner-content {
    max-width: min(90%, 960px);
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .ad-banner-content a {
    text-decoration: none;
    display: inline-block;
  }
  .ad-banner-close {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255,255,255,0.95);
    border: 0;
    border-radius: 999px;
    width: 36px; height: 36px;
    cursor: pointer;
    font-size: 20px;
    line-height: 36px;
  }
  @media (max-width: 999px) {
    /* Fallback: auf kleineren Breiten wird gar nicht erst gezeigt */
    .ad-banner-overlay { display: none !important; }
  }


 /* WERBUNG ENDE */








@media (max-width:950px)  {
.watwetter {
  width: 17%;

    }

}














@media (max-width:950px)  {
#box2a { max-width: 632px; width: calc(100% - 244px);  margin: 0px 0 0;}
  table#wetterstation3 { width: 100%; max-width: 375px; float: left; font-size: 11px;}
  
#fotterleft { width: 300px; display:block; font-size:18px; }
#fotterright { width:100%; display:block; font-size:14px; top:5px; position:relative;  }
footer { height:200px;}	

}

@media (max-width:860px)  {
#box2a { max-width: 632px; width: calc(100% - 244px);  margin: 20px 0 0;}
table#wetterstation3 { width: 50%; max-width: 375px; float: left; font-size: 11px;}
#contentcams { width:100%; max-width:1280px; margin:0 20px 0 0; float:left;  height: auto;  } 
#contentcams-start { width:100%; max-width:1280px; margin:0 20px 0 0; float:left;  height: auto;  } 
#sidebarcams { width:calc(100% - 10px); display:inline-block; margin: 20px 0 0; }
#card52 {  width: 90%; max-width: 400px; margin: 5px auto ;  border-left: 2px solid #02263b; border-right: 2px solid #02263b; display: block; }
    
 .responsive-banner {
  display: block;
  height: 150px;
  width:90%;
  position: relative;
margin: 0 auto; max-width: 500px;
  overflow: hidden;

}    
    
}



@media (max-width:792px)  {
#uves2 { width: 200px; font-size: 14px; } 
#martemp1 { width: 150px;}
    
.metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 50px auto 10px; flex-wrap: wrap; }
    
}





@media (max-width:700px)  {
#metarmitte3 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto 10px; flex-wrap: wrap; }
.textleft2 { max-width:200px; width: 100%; height: auto; text-align: center; background-color: #FAFAFA; padding:  10px 0px; border-radius: 20px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); margin: 10px auto; }
#box2a { max-width: 632px; width: calc(100% - 244px);  margin: 0px 0 0;}
table#wetterstation3 { width: 100%; max-width: 440px; float: left; font-size: 11px;}
/*#logo { height: 16px; padding: 10px; float: left; background-size: 140px 29px;  width: 120px; }*/

	#logo { font-size: 18px; height: 34px; line-height: 30px; width: 140px;  float: left;  position: absolute;  }

	
#metarmitte2 { width: 100%; display: flex; justify-content: space-around; margin: 10px auto 10px; flex-wrap: wrap; }
#uves2 { width: 200px; font-size: 14px; margin: 0 auto; } 
#martemp1 { width: 150px; margin: 0 auto 10px;}

}





@media (max-width:622px) {
#logo { top:24px; left: 50%; margin-left: -70px; float: none; }
#headercontent { width: 100%; float: none; margin: 0px auto 0; }
header { height: 55px; }  
ul#menutop { display: flex; justify-content: space-around; }

ul#nav { font-size:12px;  width: 120%; margin: 6px 0 0 -40px; }
ul#nav li { font-size:13px;  }
ul#nav li svg { width: 12px; height: 12px;}
ul#nav li a,
ul#nav li span {
  padding: 0 5px 10px;
}
    
 #dropdown { top: -1px; right: 5px;}
  
 #mapmet {width: 100%; height: 250px; margin: 20px auto;}  
    #mapstart {display: none;}
	
	
/*#werbungum { width: 100%; max-width: 622px; overflow: hidden; }  
#werbung { width: 100%; max-width: 622px; overflow: hidden; }  */
	

}


@media (max-width:546px) {
#logo { left: 50%; margin-left: -70px; }       
}

@media (max-width:500px) {
#box2a { max-width: 632px; width: 100%;  margin: 10px 0 0;}
table#wetterstation3 { width: 100%; max-width: 500px; float: left; font-size: 11px;}
    .cardwind {width: 50%; float: left; }  .card {margin: 0 auto; float: none; }
    #box1 {
  width: 50%;
  float: left;
  text-align: center;
}
    
    
h2.textcam {
  margin: 30px 0 10px;

}
    
         table.wetterprediccion tr td.maxtemp { font-size: 16px;  width: 40%;}
        table.wetterprediccion tr td.mintemp { font-size: 12px; width: 40%;}

    table.wetterprediccion tr td svg { width: 12px;}
    .watwetter {
  width: 16%;

    }
    
    
    
    
.responsive-banner2 {
  display: block; margin: 0 auto 10px;
  height: 180px;
  width:90%; max-width: 600px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
	background-image: linear-gradient(to bottom right, #589FE5, rgba(7,188,207,1));
	background-repeat: no-repeat;
  text-align: left;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

    
    
}