/* BASIS */

#Steckbrief {
width: 500px;  
background:url(/images/001/steckiback.png); 
margin: auto;
background-position-x: 5%;
}

#Steckbrief .FaktPic {
    width: 180px;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    margin-right: 5px;
}

#Steckbrief .Fakt {
 background-color: #fefefe;
border: #f1f1f1 solid 3px;
outline: 1px solid #ccc;
text-align: center;
padding: 1px 0px;
font-size: 8px;
width: 180px;
text-transform: uppercase;
margin-top: 4px;
letter-spacing: 0.5px;
}

#Steckbrief .Vergeben {
    background-color: #de9e9e;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    text-align: center;
    padding: 1px 0px;
    font-size: 8px;
    width: 180px;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

#Steckbrief .Frei {
    background-color: #84c294;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    text-align: center;
    padding: 1px 0px;
    font-size: 8px;
    width: 180px;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

#Steckbrief .FaktPic1 {
    width: 180px;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    margin-left: 5px;
}

#Steckbrief .Fakt1 {
 background-color: #fefefe;
border: #f1f1f1 solid 3px;
outline: 1px solid #ccc;
text-align: center;
padding: 1px 0px;
font-size: 8px;
width: 180px;
text-transform: uppercase;
margin-top: 4px;
letter-spacing: 0.5px;
	    margin-left: 5px;
}

#Steckbrief .Vergeben1 {
    background-color: #de9e9e;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    text-align: center;
    padding: 1px 0px;
    font-size: 8px;
    width: 180px;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
	    margin-left: 5px;
}

#Steckbrief .Frei1 {
    background-color: #84c294;
    border: #f1f1f1 solid 3px;
    outline: 1px solid #ccc;
    text-align: center;
    padding: 1px 0px;
    font-size: 8px;
    width: 180px;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
    margin-left: 5px;
}


#Steckbrief .bildchen {
    float: right;
    margin-right: 9px;
    width: 220px;
    height: 100px;
    background: #ffffff;
    padding: 10px;
	margin-top: -5px;
	margin-bottom: 5px;
}

#Steckbrief .bildchen img{
    overflow: hidden;
    width: 220px;
    height: 100px;
}

#Steckbrief .quotey {
    float: right;
    margin-right: 11px;
    width: 230px;
    height: 120px;
    background: #d57c26;
    padding: 39px 10px;
    border: solid 10px #ffffff;
    color: #ffffff;
    text-transform: uppercase;
    font-family: calibri;
    font-size: 7.5px;
    letter-spacing: 2px;
    box-sizing: border-box;
    text-align: center;
    line-height: 110%;
    overflow: hidden;
	margin-top: -5px;
	margin-bottom: 5px;
}



#Steckbrief .ueberschrift {
text-transform: uppercase;
text-align: center;
color: #fff;
letter-spacing: 1px;
margin-top: 5px;
padding: 0px 10px;
font-family: 'HipstelveticaBold';
font-size: 25px;
text-shadow: 2px 2px #d17428;

}

#Steckbrief .untertitel {
font: normal 8px/100% 'calibri', sans-serif;
text-transform: uppercase;
text-align: center;
margin: -3px 10px 3px;
padding: 5px 10px;
background-color: #fff;
letter-spacing: 0.5px;
}

#Steckbrief b {
color: #d57c26;
font-weight: bold;
letter-spacing: 1px;
}

#Steckbrief i {
color: #d57c26;
font-style: italic;
letter-spacing: 1px;
}

#Steckbrief u {
color: #d57c26;
letter-spacing: 1px;
 text-decoration: underline #963737;
}

#Steckbrief s {
color: #d57c26;
letter-spacing: 1px;
text-decoration: line-through #963737;
opacity: 0.6;
}

#Steckbrief span {
color: #d57c26;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 1px 3px 1px 5px;
margin-right: 3px;
opacity: 0.9;
background-color: #f1f1f1;
font-size: 8.5px;
display: block;
font-weight: bold;
margin-bottom: 2px;
}

#Steckbrief .Steckbrief-header {
padding: 20px 35px 40px 35px;
color: #333;
text-align: right;
background: url(/images/001/steckiheader.png);
    background-position-x: 0%;
background-position-x: 100%;
}

#Steckbrief h1 {
text-transform: uppercase;
font-family: 'HipstelveticaBold';
font-size: 30px;
}

#Steckbrief h2 {
text-transform: uppercase;
font-family: calibri;
font-size: 8px;
letter-spacing: 2px;
}

.Steckbrief-header h2 {
margin-top: -30px;
}

.Steckbrief-footer h2 {
margin-top: -47px;
}

/* Fussteil */

#Steckbrief .Steckbrief-footer {
padding: 20px 35px 40px 35px;
color: #333;
text-align: left;
background: url(/images/001/steckiheader2.png);
}


/* ABSCHNITT 1: DER SUCHENDE */

#suchender { 
width: 200px; 
height: 150px;   
background: url(https://placehold.it/200x150); /* Kleines Bild */
background-repeat: no-repeat; 
position: relative; 
overflow: hidden;
margin: 0px auto;
border-top: solid 3px #963737;
border-bottom: solid 3px #963737;
}

#suchender b {
color: #ffffff;
font-weight: 900;
}

#suchender i {
color: #ffffff;
}

#suchender u {
color: #ffffff;
}

/* Stichpunkte Textdefinition Hover-Bild klein */

#suchender .stext1 {
color: #fff;
font: normal 8px/110% 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
float: left; /* links */
margin: 20px 20px 20px 20px;
}

#suchender .stext2 {
color: #fff;
font: normal 8px/110% 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
float: right; /* rechts */
margin: 20px 20px 20px 20px;
}

/* Stichpunkte Hover Bild klein */

#suchender .stichpunkt1 { 
background:url(https://serienportal.de/blanko/codes/bilder/red.png); 
width: 200px; 
height: 50px; 
position: absolute; 
top: 0px; 
left: -230px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender .stichpunkt2 {  
background:url(https://serienportal.de/blanko/codes/bilder/red.png); 
width: 200px; 
height: 50px; 
position: absolute; 
top: 50px; 
left: 230px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender .stichpunkt3 { 
background:url(https://serienportal.de/blanko/codes/bilder/red.png);
width: 200px; 
height: 50px; 
position: absolute; 
top: 100px; 
left: -230px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender:hover .stichpunkt1, #suchender:hover .stichpunkt2,#suchender:hover .stichpunkt3 {
position: absolute; 
left: 0px; 
}

/* Stichpunkte rechts vom Bild */

.punkt {
width: 134px;
background:url(https://serienportal.de/blanko/codes/bilder/red.png);
color: #fff;
font: normal 8px/110% 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 1px; 
padding: 5px 2px;
display: inline-block;
opacity: 0.9;
}


.suchender-text {
background-color: #fff;
font-size: 10px;
font-family: calibri;
padding: 10px;
margin: 0px 10px;
}



.sonstiges-text {
text-align: justify;
font: normal 12px/120% 'Source Sans Pro', sans-serif;
color: #151515;
margin: 15px 15px;
}

#steckbriefbild { 
width: 480px;
height: 250px;
background: url(https://em.wattpad.com/92c57a16189ab6b7e6266852417c9f95c7f2d830/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f34314e5873744a694e6338624b673d3d2d3333333232383834312e3134383636373966616466323964616231343638323930363736362e676966?s=fit&w=1280&h=1280);
    background-repeat: repeat;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
margin: 8px 8px;
border: 2px solid #fff;
}

#steckbriefbild:hover .b1, #steckbriefbild:hover .b2, #steckbriefbild:hover .b3,  #steckbriefbild:hover .b4, #steckbriefbild:hover .b5, #steckbriefbild .hover-hintergrund:hover {
position: absolute; 
left: -5px;
}

#steckbriefbild .hover-hintergrund-text {
background-color: #fff;
height: 230px;
width: 235px;
left: 200px;
top: 10px;
opacity: 0;
position: absolute;
-webkit-transition: 0.9s; transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s;
}

#steckbriefbild:hover .hover-hintergrund-text {
left: 10px;
opacity: 0.9;
position: absolute;
}

#steckbriefbild .hover-hintergrund-fakten {
background-color: #;
width: 220px;
height: 230px;
left: -10px;
top: 10px;
opacity: 0;
position: absolute;
-webkit-transition: 0.9s; transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s;
}

#steckbriefbild:hover .hover-hintergrund-fakten {
top: 10px;
left: 250px;
opacity: 1;
position: absolute;
}

#steckbriefbild .hover-text {
border: 15px solid #fff;
font: normal 10px/120% 'Calibri', sans-serif;
text-transform: uppercase;
text-align: justify;
color: #646463;
}

/* Stichpunkte rechts, höchstens neun Stück */

#steckbriefbild .stichpunkt {
background-color: #c6dac9;
width: 210px;
margin: 1px 0px;
padding: 3px 5px;
font: bold 8px/120% 'Calibri', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;

}

#steckbriefbild .kleinertext { 
background-color: #fff;
padding: 20px 15px;
font: bold 8.5px/120% 'Calibri', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
opacity: 0.8;
height: 40px;

}