{"now":1765468501,"sunrise":1765438903,"sunset":1765476556,"grad":180}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*begin our styles*/

/*Symbolfont http://modernpictograms.com/*/

@font-face {
    font-family: 'modern_pictograms_proregular';
    src: url('../skripte/webfonts/modernpictogramspro_2-webfont.eot');
    src: url('../skripte/webfonts/modernpictogramspro_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('../skripte/webfonts/modernpictogramspro_2-webfont.woff') format('woff'),
         url('../skripte/webfonts/modernpictogramspro_2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'veneerlowresregular';
    src: url('../skripte/webfonts/veneerlowres-webfont.eot');
    src: url('../skripte/webfonts/veneerlowres-webfont.eot?#iefix') format('embedded-opentype'),
         url('../skripte/webfonts/veneerlowres-webfont.woff') format('woff'),
         url('../skripte/webfonts/veneerlowres-webfont.ttf') format('truetype'),
         url('../skripte/webfonts/veneerlowres-webfont.svg#veneerlowresregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html { 
	background-color: hsl(88,60%,60%);
	

	background-image: url('../webcam/live.jpg?1765468501'); /* Pfad zu deinem Hintergrundbild */
	background-size: cover; /* Bild wird skaliert, um den gesamten Hintergrund zu bedecken */
	background-position: center; /* Bild wird zentriert */
	background-repeat: no-repeat; /* Bild wird nicht wiederholt */
	margin: 0; /* Entfernt Standardabstand */
	min-height: 100%; /* Stellt sicher, dass das Element mindestens die Höhe des Viewports einnimmt */
	background-blend-mode: soft-light; /* Mischt das Bild mit dem Hintergrund */

}

#background {
/*background: linear-gradient(to top, rgba(47, 231, 255, 0.5) 0%, rgba(214, 214, 92, 0.5) 40%, rgba(214, 214, 92, 0.5) 100%);*/
position:absolute;
height: 100%;
width: 100%;

}

#vorhersage {
height: 500px;
margin: 140px 20px 0 20px;
background: url(../bilder/wsymbol_0001_sunny.svg) 50% 50% no-repeat;
background-position: top;
background-size: contain;
opacity: 0.3;
}


body {
	font-family: Center-Regular;
	font-size: 16px;
    line-height: 1.4em;
	font-weight: normal;
	font-style: normal;
	color: black;

}

p,
ul {
	margin: 0 0 1.5em;
}

ul {
	list-style: disc;
	padding: 0 0 0 20px;
}

a {
    color: black;
    text-decoration:none
}


h2, h3 {
	text-rendering: optimizeLegibility;
}


h1 {

}

h2 {
	font-family: Center-Regular;
	font-weight: normal;
	font-style: normal;
	font-size:76px;
	letter-spacing: 0px;
	line-height: 0.0em;
	
}

h2 i {
	font-family: Center-Medium;
	font-weight: normal;
	font-style: normal;
    font-size: 25px;
}


h3 {
	font-family: Center-Bold;
	font-weight: normal;
	font-style: normal;
	font-size: 28px;
	line-height: 30px;
}

h3 i {
	font-family: Center-Regular;
	font-weight: normal;
	font-style: normal;
}

.einheit {
    font-family: Center-Regular;
	font-weight: normal;
	font-style: normal;
    font-size: 18px;
    line-height: 0;
}

.tendenz {
	color: black;
    font-family: Center-Black;
	font-weight: normal;
	font-style: normal;
    font-size: 18px;
    line-height: 0;
}

.icon{
    font-family: modern_pictograms_proregular;
}

[data-icon]:before 
{
    font-family: modern_pictograms_proregular;
    content: attr(data-icon);
    speak: none; /* Not to be trusted, but hey. */
}	

.richtung{
	font-family: modern_pictograms_proregular;
	font-size: 45px;}

table {
	font-family: Center-Medium;
    vertical-align: top; 
    margin: 0 auto;
}

#tabellenbox {
    padding: 0px 0px 30px 0px;
}

.werte {
	font-size: 18px;
    line-height: 5px;
	font-weight: normal;
	font-style: normal;
	color: black;
		}

.werte td {  /* bezieht sich auf alle tds innerhalb der Tabelle 'werte', Beeinflußte auch die Position in der hirachisch höheren Box*/
  	text-align:center;
  	vertical-align:middle;
  	padding: 30px 2px 0px 0px;
}

/* Gesamtstil für die Tabelle */
.table-tide {
    margin-top: 17px; /* Kein Abstand zum vorherigen Element */
    border-collapse: collapse; /* Tabelle ohne Abstände zwischen Zellen */
}

/* Stil für die linke Spalte, die Tide-Typen anzeigt */
.tide-l {
	font-family: Center-Medium;
    font-size: 34px;
    text-align: right;
    vertical-align: middle;
    padding-right: 10px;
    padding-bottom: 6px;
}

/* Stil für die obere rechte Zelle (Tide-Zeit) */
.tide-r-t {
    font-family: Center-Medium;
    font-size: 24px;
    text-align: left;
    vertical-align: bottom;
}

/* Stil für die zweite Zeile der oberen rechten Zelle (Tide-Höhe) */
.tide-r-h {
    font-family: Center-Regular;
    font-size: 18px;
    text-align: left;
    vertical-align: top;
    padding-bottom: px;
}


/*layout*/

.wrapper {
position: relative;
}


article {
	text-align: center;
	padding: 5px 10px 0px 10px;
}


/*Felxibles und verschiebbares Box-Design*/
.flex_container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 100%;
        }
        .flex_box {
			height: 115px;
            margin: 0px;
			min-width: 12ch; /* Mindestbreite der Box */
            max-width: 26ch; /* Maximalbreite der Box */
            width: auto;
			padding: 0 10px;
            box-sizing: border-box;
            border-left: none;
			border-bottom: 1px solid black;
			border-top: none;
			border-right:  none;
			border-radius:0px 0px;
			/*background-color: lightgray;*/
        }

		
		.flex_box:hover,
		.flex_box:focus {
		border-bottom: 6px solid black;
		}


		/*header*/

header {
	background:url('../bilder/black-Linen.png') repeat #1b1c1c;
	padding: 16px 18px;
	box-shadow: 0 0 40px 0px black;
}

		/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
		header:before,
		header:after {
		    content:"";
		    display:table;
		}
		
		header:after {
		    clear:both;
		}
		
.logo a {
	font-family: Center-Regular;
	color: #d8d8d8;
	text-decoration: none;
	font-size: 28px;
	float: left;
}

.logo a::before {
    content: '';
    display: inline-block;
    width: 22px; /* Breite des Logos */
    height: 22px; /* Höhe des Logos */
    margin-right: 10px; /* Abstand zwischen Logo und Text */
    background: url('../bilder/logo.svg') no-repeat center center;
    background-size: contain; /* Passt das Logo in die Größe des Pseudo-Elements ein */
	position: relative; /* Ermöglicht die Verschiebung des Logos */
	top: 2px; /* Verschiebt das Logo nach unten */
  }


a.to_nav {
	font-family: Center-Medium;
	font-weight: normal;
	font-style: normal;
	float: right;
	color: #fff;
	background: #4e4e4e;
	text-decoration: none;
	padding: 0 10px;
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	height: 22px;
	letter-spacing: 0.05em;
	border-radius: 2px;
}

a.to_nav:hover,
a.to_nav:focus {
	color: #1c1c1c;
	background: #ccc;
}

#unter_t {
	display: none;
}
	
/*navigation*/	

#primary_nav ul {

	list-style: none;
	background:url('../bilder/black-Linen.png') repeat #1b1c1c;
	padding: 5px 0;
}

#primary_nav li a {
	font-family: Center-Regular;
	font-weight: normal;
	font-style: normal;
    font-size: 17px;
	display: block;
	padding: 0 20px;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0.05em;
	line-height: 28px;
	height: 33px;
	border-bottom: 1px solid #383838;
}

#primary_nav li:last-child a {
	border-bottom: none;
}

#primary_nav li a:hover,
#primary_nav li a:focus {
	color: #1c1c1c;
	background: #ccc;
}

kreis {
	background: #1b1c1c;
	color: white;
	font-size: 13px;
	padding: 5px 10px 5px 10px;
    line-height: 2em;
	height: 2em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

kreis:hover,
kreis:focus  {
	background: white;
    color:black;
} 

/* Google Visualisierung */

#chart_div {

} 

select {
    width: 100%;
    border:1px solid black;
    padding:3px 3px;
    margin:8px 0 0 0;
    color: black;
    background-color:hsl(88,60%,60%);
}

/*footer*/

footer {
	font-family: Center-Regular;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	font-size: 14px;
}

footer i {
	font-family: Center-Italic;
	font-weight: normal;
	font-style: normal;
	text-align: center;
}

/*Bloging System*/


.comment,
#addCommentContainer{
	
	/* Syling the comments and the comment form container */
	padding:15px;
	width:278px;
	position:relative;
	background-color:hsl(88,68%,70%);
	color:black;
	margin-bottom:10px;
	
	/* CSS3 rounded corners and drop shadows */
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;

}

.comment .avatar{

	display: none;
}

.comment .avatar img{
	display:block;
}

.comment .name{
	font-family: 'veneerlowresregular', sans;
	font-size:20px;
    letter-spacing: 0.05em;
	padding-bottom:10px;
	color:black;
}

.comment .date{
	font-size:11px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:black;
}

.comment p,
#addCommentContainer p{
	font-size:16px;
	line-height:1.5;
	overflow-x:hidden;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs */

	display:block;
	border:1px solid #ccc;
	margin:5px 0 5px;
	padding:3px;
	font-size:13px;
	color:black;
}

#addCommentContainer textarea{
	width:250px;
}

label{
	font-family: Center-Bold;
} 

label span.error{
	color:red;
	position:relative;
	right:-10px;
}

#submit{
	
	/* The submit button */
	
	background-color:hsl(88,60%,60%);
	border: 1px solid white;
	color:black;
	padding: 2px 10px 2px 10px;
	margin-top:5px;

	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}

#submit:hover, #submit:focus{
	color: black;
    background: white;
    cursor:pointer
}

/* E-Mail Formular unter Kontakt */ 

#form{
	
	}
	
form label{
	display:inline-block
	}

	
form .error{
    font-family: Center-Medium;
	display:none;
	color:#fff;
	font-size:14px;
	margin:-5px 0 20px 0
	}
	
input.submit{
	/* The submit button */
	border-color: #fff;
    background: #565656;
    color: #fff;
	padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
	border: 1px solid transparent;
	}
	
input.submit:hover{
	color: black;
    background: white;
    cursor:pointer
	}
	
p{
	margin:10px 0 0
	}
	
p.code{
	font-size:10px;
	}
	

/*media queries*/

		@media only screen and (min-width: 1000px) {
        
			#unter_t {
				margin-top: 3px; 
            	display: block;
				color: #d8d8d8;
				text-decoration: none;
				font-size: 16px;
				line-height: 22px;
				float: left;
				letter-spacing: 0.01em;
			
            } 
		
			a.to_nav {
				display: none;
			}
			

   			.wrapper {
				position: relative;
				width: 1000px;
				margin: auto;
			}
			
			#primary_nav {
				position: absolute;
				top: 10px;
				right: 10px;
				background: none;
			}
			
			#primary_nav li {
				display: inline;
			}
			
			#primary_nav li a {
				float: left;
				border: none;
				padding: 0 10px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				border-radius: 2px;
			}
	
                
    
}