@charset "utf-8";

@font-face {
font-family:'Anaheim';
font-style:normal;
font-weight:400;
src: local('Anaheim'), url('../fonts/Anaheim-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'Noto';
font-style: normal;
font-weight: 800;
src: local('Noto'), url('../fonts/NotoSerif-Regular.ttf') format('truetype');
}

* {margin:0; padding:0; box-sizing: border-box; }

:root { --blau:#4f7bf4; --hellgrau:#fafafa; --schwarz:#111; --weiss:#fff;  --dunkelgruen:#188db3;  --hellgruen:#48ce75; --dunkelgrau:#2a3747; --rot:#e21d8e; }

body { font-family:'Anaheim'; font-size:19px; color:var(--schwarz); background:var(--hellgrau); }

* html .clearfix { height:1%; }
.clearfix { display:block; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }


a:link {color:color:var(--blau); text-decoration:none;}
a:active, a:visited {color:color:var(--blau); }
a:link::after {
content:"";
width: 11px;
height: 11px;
margin-left: 7px;
margin-right:7px;
background-image: url("../icons/icon-externer-link.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}

h1, h2 { font-family:'Anaheim',sans-serif; font-size:24px; margin:0 0 20px 0; padding:0; color:var(--dunkelgrau); }
h2 { color:var(--blau); }

address { font-style:normal; }
.umbruch { hyphens:auto; -moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; }

.header { padding:0px; width:1200px; position:relative; margin:30px auto; }

.container { padding:0px; width:1200px; position:relative; margin:0px auto; }

.col1-2, .img { width:600px; height:600px; background:var(--weiss); }
.col1-2-hoch { width:300px; height:600px; background:var(--hellgrau); }
.col1-2-breit { width:600px; height:300px; background:var(--hellgrau); }

.text { margin:90px; }
.formular {position:relative; top:100px;}
.foto { width:600px; height:600px; }

.top, .end { margin-top:30px; margin-bottom:30px; width:100%; height:50px; }
.end { background:var(--hellgrau); } /* für evtl. dunklen footer Farbe ändern */



.logo { float:right; }
.centered { text-align:center; }
.warnung-all-centered { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:var(--blau); }

.transitions-enabled.masonry {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;

-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;

-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-ms-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}

/* typewriter Start */
.type, .gesendet {font-family: "Anaheim", sans-serif;font-size:19px;position:relative;margin:90px auto;width: 420px;color:#fefefe;}
.cursor {font-weight:bold;color white;}
.blink {animation:blink 0.7s infinite;}
@keyframes blink {50% {opacity:0;}}
@keyframes fadein {0% {opacity:0;}
50% {opacity: 0.5;}100% {opacity:1;}}
/* typewriter Ende */



/* Formular Anfang */

input[type=text], input[type=tel], input[type=email], input[type=password]  {
font-family: "Anaheim", sans-serif;
font-size:19px;
width: 100%;
padding: 8px;
margin:15px 0 20px 0;
background:#222;
color:white;
border:none;
border-bottom:1px solid #eee;
}

textarea  {
font-family: "Anaheim", sans-serif;
font-size:19px;
width: 100%;
padding: 8px;
margin:15px 0 20px 0;
background:#222;
color:white;
border:none;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
height:100px;
}

input[type=submit] {
font-family: "Anaheim", sans-serif;
font-size:19px;
padding: 8px 12px;
margin:20px auto 50px auto;
background:#0080ff;
color:white;
border:none;
cursor:pointer;
}
::placeholder {color: #777; opacity: 0.5;}
/* Formular Ende */

@media only screen and (max-width: 1548px) {
.header { width:600px; }
.container { width:600px; }
.img { padding:1px; }
}

@media only screen and (max-width: 699px) {
.text { margin:30px; }
.foto { width:300px; height:300px; }
.header { width:300px; }
.container { width:300px; }
.col1-2, .img { width:300px; height:300px; }


.type, .gesendet {
font-size:17px;
position:relative;
margin:30px;
width:230px;
}

.formular {top:30px;}
h1, h2, .end { font-size:17px; }
h1 { font-weight:normal; }
}