/* ============================== */
/* === Powered by locomputing === */
/* ============================== */

main {
margin: calc(.15em + ((.15vw - 0.1em) * 1)) 0; 
padding: calc(.15em + ((.15vw - 0.1em) * 1)) 0;
}

article {
display: block;
margin:calc(.65em + ((.65vw - 0.1em) * 1)) calc(1.5% + ((1vw - 1.5%) * .5)) calc(1.1em + ((1.1vw - 0.1em) * 1)) 
calc(.2em + ((.2vw - 0.1em) * 1));
padding:calc(.1em + ((.1vw - 0.1em) * 1));
}

footer {
  display:block;
  height: calc(1.1em + ((1.1vw - 0.1em) * 1));
  background: sienna linear-gradient(77deg, #cd764c, gold, #e5e600 , sienna);
  transform: skew(0deg, -1deg);
  margin: 0;
  border-top:calc(.13em + ((.13vw - 0.1em) * 1)) solid #333333;
}
.footer {
  display:block;
  position: relative;
  text-align:center;
  min-height: calc(.1em + ((.1vw - 0.1em) * 1));
  background: sienna linear-gradient(77deg, #cd764c, gold, #e5e600 , sienna);
  margin:-.68em 0 0 0;
  padding: 0 0 5px 0;
  border-bottom:4px solid #333333;
}
.foottext {
font-size: 60%;
font-family: 'Times New Roman',serif;
letter-spacing: calc(.1em + ((.1vw - 0.1em) * 1));
font-weight: bold;
color: #d7b700;
margin-top: 0;
text-align: center;
cursor: default;
z-index:3;
-webkit-text-stroke:1px #222222;
}
.fuss {
margin:0;
width: calc(7em + ((7vw - 0.1em) * 1));
height: auto;
line-height: auto;
display:inline-block;
}

#fotimpe {
fill: none;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}
#fotimpe:hover {
fill: #42ff43;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));		
}
#fotimpes {
fill: #ff5b5b;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}

#covert {
fill: none;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}
#covert:hover {
fill: #42ff43;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));	
}
#coverta {
fill: #ff5b5b;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}

#smap {
fill: none;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}
#smap:hover {
fill: #42ff43;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));	
}
#smaps {
fill: #ff5b5b;
width:calc(2em + ((2vw - 0.1em) * 1));
height:calc(1.5em + ((1.5vw - 0.1em) * 1));
}

.ribkop {
background-color: white;
border-right: calc(.15em + ((.15vw - 0.1em) * 1)) solid black;
}



.ribbon {
 font-size: 75%;
 font-weight: bold;
 width: 100%;  
 position: relative;
background: sienna linear-gradient(105deg, #cd764c 5%, gold 12% , gold 60% , white);
border-top: calc(.12em + ((.12vw - 0.15em) * 1)) solid;
border-bottom: calc(.12em + ((.12vw - 0.15em) * 1)) solid;
border-left: calc(.125em + ((.125vw - 0.15em) * 1)) solid;
border-image: linear-gradient(to right,black,black,gray,silver,transparent)1;
-webkit-text-stroke: .0075em black;
border-right:none;
 color: black;
 text-align: left;
 padding: calc(.15em + ((.15vw - 0.1em) * 1)) calc(.35em + ((.35vw - 0.1em) * 1)); 
 cursor:default;
 margin-bottom: -1px;
 z-index: 3;
}

.ribangle {
  width: calc(.5em + ((.5vw - 0.1em) * 1));
  aspect-ratio: 1;
  clip-path: polygon(24% 0%,100% 0%,100% 100%,60% 49%);
  background: linear-gradient(210deg,#000000,#838383,#cfcfcf);
  margin: 0 0 0 -.135em;
}

@media screen and (max-width: 800px) {
.ribbon {
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
}
.ribangle {
  margin: 0 0 0 -.119em;
}
}





.ribbon1 {
 width: 100%;  
 font-size: 90%;
 position: relative;
}
#rose {
position: relative;
margin: calc(-1.8em + ((.2vw - 0.1em) * 1)) 0 0 calc(4em + ((4vw - 0.1em) * 1));
color:red;
font-weight: bold;
-webkit-text-stroke: .0075em black;
z-index: 6;
}

@media screen and (min-width: 500px) {
#rose {
margin: calc(-2.2em + ((2.2vw - 0.1em) * 1)) 0 0 calc(4em + ((4vw - 0.1em) * 1));
}
}
@media screen and (min-width: 650px) {
#rose {
margin: calc(-2.4em + ((2.4vw - 0.1em) * 1)) 0 0 calc(4em + ((4vw - 0.1em) * 1));
}
}
@media screen and (min-width: 900px) {
#rose {
margin: calc(-2.6em + ((2.6vw - 0.1em) * 1)) 0 0 calc(3.8em + ((3.8vw - 0.1em) * 1));
}
}
@media screen and (min-width: 950px) {
#rose {
margin: calc(-3.25em + ((3.25vw - 0.1em) * 1)) 0 0 calc(3.6em + ((3.6vw - 0.1em) * 1));
}
.ribbon1 #kuhl {
margin: calc(-1.75em + ((.2vw - 0.1em) * 1)) 0 0 0;
}
}
@media screen and (min-width: 1024px) {
#rose {
margin: calc(-3.5em + ((3.5vw - 0.1em) * 1)) 0 0 calc(3.5em + ((3.5vw - 0.1em) * 1));
}
}
@media screen and (min-width: 1250px) {
#rose {
margin: calc(-3.65em + ((3.65vw - 0.1em) * 1)) 0 0 calc(3.5em + ((3.5vw - 0.1em) * 1));
}
}
@media screen and (min-width: 1500px) {
#rose {
margin: calc(-3.9em + ((3.9vw - 0.1em) * 1)) 0 0 calc(3.4em + ((3.4vw - 0.1em) * 1));
}
}

@media screen and (min-width: 1920px) {
#rose {
margin: calc(-4.2em + ((4.2vw - 0.1em) * 1)) 0 0 calc(3.4em + ((3.4vw - 0.1em) * 1));
}
}
@media screen and (min-width: 3840px) {
#rose {
margin: calc(-5em + ((5vw - 0.1em) * 1)) 0 0 calc(3.4em + ((3.4vw - 0.1em) * 1));
}
}
@media screen and (min-width: 7680px) {
#rose {
margin: calc(-5.75em + ((5.75vw - 0.1em) * 1)) 0 0 calc(3.4em + ((3.4vw - 0.1em) * 1));
}
}







.contkop {
background-color:white;
height: calc(.5em + ((.5vw - 0.1em) * 1));
padding: 2px 0 2px 10px;
margin:0 0 0 .35em;
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, black, #333333) border-box;
border-radius: calc(.2em + ((.2vw - 0.1em) * 1)) calc(.5em + ((.5vw - 0.1em) * 1)) 0 0;
border: calc(.15em + ((.15vw - 0.1em) * 1)) solid;
border-top: calc(.13em + ((.13vw - 0.1em) * 1)) solid;
border-left: calc(.11em + ((.11vw - 0.1em) * 1)) solid;
border-bottom:none;
}
#continhalt {
position: relative;
font-size: 88%;
margin:-.75em 0 calc(.2em + ((.2vw - 0.1em) * 1)) .35em;
padding:calc(.8em + ((.8vw - 0.1em) * 1)) calc(.2em + ((.2vw - 0.1em) * 1)) calc(.3em + ((.3vw - 0.1em) * 1));
text-align:left;
background-color:white;
background: linear-gradient(white, white) padding-box,
linear-gradient(to right, black, #333333) border-box;
border-left: calc(.115em + ((.115vw - 0.1em) * 1)) solid #222222;
border-radius: 0 0 calc(.2em + ((.2vw - 0.1em) * 1)) calc(.5em + ((.5vw - 0.1em) * 1));
border-right: calc(.16em + ((.16vw - 0.1em) * 1)) solid black;
border-bottom: calc(.16em + ((.16vw - 0.1em) * 1)) solid black;
border-top:none;
-webkit-text-stroke: calc(.1em + ((.1vw - .15em) * 1)) black;
cursor:default;
}




img.bildi {
display: block;
margin: 0 auto;
width: calc(12em + ((12vw - 0.1em) * 1));
height: auto;
}



.hamb {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: .15em;
}
.kreuz {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: .15em;
}
.estift {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .15em;
left: .15em;
}



.namen {
display: inline-block;
width: 100%;
position: relative;
background-size: 50% 80px;
background-position: 5px 50%;
background-repeat: no-repeat;
margin:0;
}
.namen .svreguser {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .35em;
left: .25em;
}
.namen .svregmail {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .35em;
left: .25em;
}

.namen .svfrcode {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .35em;
left: .25em;
}

.namen .svkey {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .35em;
left: .25em;
}




.namen .svpwvmail {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: 0;
margin: calc(.18em + ((.18vw - 0.1em) * 1)) 0 0 5px;
}


.namen .svwrite {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: .15em;
left: .25em;
}

.namen .sventry {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: 0;
margin: calc(.1em + ((.1vw - 0.1em) * 1)) 0 0 .1em;
}






.namen .svgtestn {
width: calc(1.1em + ((1.1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: calc(.25em + ((.25vw - 0.1em) * 1));
margin: calc(.15em + ((.15vw - 0.1em) * 1)) 0 0 0;
}
.namen .svgtestk {
width: calc(1em + ((1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: calc(.25em + ((.25vw - 0.1em) * 1));
margin: calc(.3em + ((.3vw - 0.1em) * 1)) 0 0 0;
}
.namen .svgtestm {
width: calc(1em + ((1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: calc(.25em + ((.25vw - 0.1em) * 1));
margin: calc(.52em + ((.52vw - 0.1em) * 1)) 0 0 0;
}
.namen .svgtestha {
width: calc(1em + ((1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: calc(.25em + ((.25vw - 0.1em) * 1));
margin: 0;
}
.namen .svgtesto {
width: calc(1em + ((1vw - .15em) * 1));
height: auto;
position: absolute;
top: 0;
left: calc(.3em + ((.3vw - 0.1em) * 1));
margin: calc(.15em + ((.15vw - 0.1em) * 1)) 0 0 0;
}



.namen .feedback-inpute {
	color:black;
	outline: none;
   border:1px solid #aaa;
   box-shadow: inset 0 0 1px #aaa, 0 0 1px #aaa;
	font-size: calc(.85em + ((.85vw - 0.3em) * 0.5));
	background: white;
	padding: calc(.25em + ((.25vw - 0.1em) * 1)) calc(1.5em + ((1.5vw - 0.1em) * 1));
	margin:0;
	width:100%; 
	border-radius: calc(.25em + ((.25vw - 0.1em) * 1));
}
.namen .feedback-inpute input[type='text']::placeholder {
color:red;
font-weight:normal;
opacity: .8;
text-align: left;
}
.feedback-inpute:focus {
border: 1px solid red;
box-shadow: inset 0 0 1px red, 0 0 1px red;
}
.feedback-inpute:valid {
border: 2px solid green;
box-shadow: inset 0 0 1px green, 0 0 1px green;
}