/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v39-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v39-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v39-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v39-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v39-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v39-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* oswald-700 - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/oswald-v39-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/oswald-v39-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oswald-v39-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/oswald-v39-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v39-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v39-latin-700.svg#Oswald') format('svg'); /* Legacy iOS */
}


* {
padding : 0;
margin : 0;
}

html {
min-height : 101%;
margin : 0;
}

body {
margin : 0 auto;
background-color : #eee8ef;
background-color : #eeeeee;
font-family : Arial, Helvetica, Verdana, sans-serif;
width : 980px;
padding:0;
}

#rahmen {
position: relative;
margin : 0 auto;
background-image : url(https://www.umstieg-21.de/assets/templates/img/header.jpg);
background-repeat : no-repeat;
background-position : top center;
border : 0;
text-align : center;
background-color : transparent;

}

#kopf {
text-align : left;
padding : 0;
border : 0;
height : 238px;

}
#kopf span {
display : block;
}


#menu img.first
{
  position: relative;
  top: -5px;
  width: 24px;
  
}
#menu span.mymenu1 {
float:right;  
  margin-left: 5px;
  height:0;
}

#logo {
border : 0;
padding : 0;
font-size : 11px;
position: absolute;
right: 0;
top: 98px;
text-decoration : none;
line-height: 18px;
height : 100px;
}

#logos {
color: #fff;
font-size: 2.1em;
font-weight: normal;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 8px;

}


#slogan {
position: absolute;
top: 18px;
left: 17px;
background-color::transparent;
}
#slogan a{
background-color:transparent;
}

#logo h1 {
font-size : 12px;
color:black;
display : inline;
font-weight: normal;
}
#logo img {
float : left;
margin-right: 0;
border : 0;
}
#kopfzeile {
text-align : right;
padding-top:18px;
padding-right: 18px;
line-height: 28px;
font-size: 45px;
font-weight: bold;
color: #36312e;

}

#kopfzeile div {
display:block;

}

#kopfzeile a{
text-decoration : none;
color: black;
}
.zaehler {
font-size: 45px;
font-weight: bold;
color: #36312e;
}


/* ============================================================== */
/* ========================= STARTSEITE Elemente =================== */
/* ============================================================== */

#inhalt {
position: relative;
text-align : left;
line-height : 1.3em;
color : black;
color: #484739;
font-size : 0.9em;
padding : 0;
padding-top : 24px;
padding-right: 0;
padding-bottom: 12px;
padding-left : 0;
margin : 0;
border : 0;


}


.box1 {
float: left;
padding:0;
margin:0;
background-color: #6a7b85;
color: #fff;
padding-left: 100px;
display: block;
width: auto;
background-image : url(../img/nummer1.png);
background-repeat : no-repeat;
background-position: 20px 25px;
}

.box1:hover, .box2:hover, .box3:hover, .box4:hover {
background-color: #36312e;
  cursor: pointer;
}




.box2 {
float: left;
padding:0;
margin:0;
background-color: #866a69;
color: #fff;
padding-left: 100px;
display: block;
width: auto;
background-image : url(../img/nummer2.png);
background-repeat : no-repeat;
background-position: 20px 25px;
}

.box3 {
float: left;
padding:0;
margin:0;
background-color: #47594b;
color: #fff;
padding-left: 100px;
display: block;
width: auto;
background-image : url(../img/nummer3.png);
background-repeat : no-repeat;
background-position: 20px 25px;
}

.box4 {
float: left;
padding:0;
margin:0;
background-color: #514838;
color: #fff;
padding-left: 100px;
display: block;
width: auto;
background-image : url(../img/nummer4.png);
background-repeat : no-repeat;
background-position: 20px 25px;
}

.box5 {
clear:both;
}
.box5 img {
margin-right: 5px;
}

.box5 #hier img {
filter: opacity(0.5);
filter: opacity(1);
}
.box5 .butset {
margin-top: 3em;
}
.box5 .buttext {
color: #36312e;
text-decoration: none;
border-bottom:0;
font-weight: bold;
margin-right: 30px;
position: relative;
top: -20px;
}

.mini .box1:hover {
background-color: #6a7b85;
cursor:default;
}

.mini .box2:hover {
background-color: #866a69;
cursor:default;
}

.mini .box3:hover {
background-color: #47594b;
cursor:default;
}

.mini .box4:hover {
background-color: #514838;
cursor:default;
}

.startboxtext {
float: left;
padding:0;
margin:0;
width: 70%;
padding-right: 5%;
height: 150px;
}
.startboxtext h2 {
font-size: 1.5em;
}

a .startboxtext {
margin-right:-200px;
margin-left: -98px;
padding-right: 200px;
padding-left: 98px;
width: 70%;
}


.startpic {
float:right;
width: 150px;
height: 150px;
}
.startpic img {
position: absolute;
right: 20px;
width: 150px;
height: 150px;
}

.clear {
display:block;
clear: both;
height: 12px;
}


/* ============================================================== */
/* ========================= Inhalte Elements =================== */
/* ============================================================== */

#inhaltsbox {
position: relative;
text-align : left;
line-height : 1.3em;

color: #484739;
font-size : 1em;
padding : 0;
padding-top : 24px;
padding-right: 20px;
padding-bottom: 24px;
padding-left : 20px;
margin : 0;
margin-top: 24px;
margin-bottom: 24px;
border : 0;
border-radius:0;
min-height: 300px;
background-color: #dfdfd5;
background-color : #eeeeee;
background-color : #f3f3f3;
background-color : #f5f5f5;
}

/*  inhaltsbox fernsehturmstiel im hintergrund
background-image : url(../img/hg-inhalt.jpg);
background-repeat : no-repeat;
background-position: top center;
background-attachment: fixed; */



#inhaltsbox.minibox {

padding-top : 24px;
padding-right: 20px;
padding-bottom: 24px;
padding-left : 20px;
margin-top: -12px;
}


#inhaltsbox.zwei {
position: relative;
float: left;
padding-top : 24px;
padding-right: 20px;
padding-bottom: 44px;
padding-left : 20px;
margin-top: 24px;
display: block;
}



#inhaltsbox ol, #inhaltsbox ul {
list-style-position: outside;
  padding-right: 2em;
  padding-bottom: 2em;
padding-left: 2em;


}
#inhaltsbox ol li, #inhaltsbox ul li{
  padding-top: 0.6em;
}

#inhaltsbox ol.plus {
	list-style-position: inside;
	counter-reset: my-second-counter;
	margin: 0;
	padding: 0;
	 padding-right: 0!important;
	list-style: none;
		width: 100%;
  padding-bottom: 2em;
}
#inhaltsbox ol.plus li {
	counter-increment: my-second-counter;
margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
	display: inline-block;
	padding-top: 5px;
}
#inhaltsbox ol.plus li::before {
  position: relative;
  left: 0;	
	content: counter(my-second-counter) '';
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	line-height: 42px;
	text-align: center;
	border-radius: 50%;
  border: solid #000 2px;
	background: #fff;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin: 0 15px 20px 0;
}


blockquote {
padding: 2em;
background-color: #D8e69C;
}
blockquote h1 {
color: black;
padding-bottom: 0.6em;
font-size: 1.35em
}

blockquote p{
padding-bottom: 0;
margin-bottom:0.6em;
}

.butset a {
text-decoration: none;
}

/* ============================================================== */
/* ========================= HTML Elements =================== */
/* ============================================================== */
h1 {
font-size : 1.8em;
line-height: 1.2em;
color: #333333;
font-weight: normal;
padding-bottom: 0;
margin-bottom:0;
color: #b0de02;
color: #83ad20;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}

h2 {
margin-top: 0;
margin-bottom : 1em;
font-size : 1.2em;
line-height: 1.2em;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-left: 1.2em;
color : #fff;
font-family: 'Oswald', sans-serif;
font-weight: 400;
color: #004E98;
}

.startboxtext h2 {
padding-top: 45px;
padding-bottom: 5px;
}

#inhaltsbox h1 {
font-weight:normal;
}

#inhaltsbox h3 {
font-weight:bold;
padding-top: 0;
font-size : 1em;
line-height: 1.2em;
padding-bottom: 0.3em;

}



h4 {
font-size: 0.85em;
line-height: 1.7em;
color:#83ad20;
font-weight:normal;
}


h4 a:link, h4 a:visited, h4 a:hover, h4 a:focus, h4 a:active {
color:#004E98;
text-decoration: underline;
font-weight: normal;
font-size: 1.5em;
}

h4 a:hover, h4 a:focus, h4 a:active {
color:#36312e;
text-decoration: underline;
}

h5 {
font-size: 1em;
line-height: 1em;
font-weight: bold; 
padding-bottom: 0.3em;
margin-bottom:0;
color: #004E98;
}


h6 {
margin-top: 0;
margin-bottom : 0;
font-size : 1.2em;
line-height: 1.2em;
padding-top: 0.3em;
padding-bottom: 0.3em;
color : #fff;
color: #004E98;
font-weight:normal;
  display:block;
  clear:both;
}


h6 a:link, h6 a:visited, h6 a:hover, 
h6 a:focus, h6 a:active {
color: #36312e;
color: #83ad20;
text-decoration: none;
color : #333;
}

.h6blau h6 a:link, .h6blau h6 a:visited, .h6blau h6 a:hover, 
.h6blau h6 a:focus, .h6blau h6 a:active  {
  color: #004E98;
  color:#36312e;
}

h6 a:hover, h6 a:focus, h6 a:active,
.h6blau  h6 a:hover, .h6blau h6 a:focus, .h6blau h6 a:active{
color:#36312e;
color: #83ad20;
}




#inhaltsbox h3 a:link, #inhaltsbox h3 a:visited, 
#inhaltsbox h3 a:hover, #inhaltsbox h3 a:focus, #inhaltsbox h3 a:active {
color: #be000e;
text-decoration: underline;}

#inhaltsbox h3 a:hover, #inhaltsbox h3 a:focus, 
#inhaltsbox h3 a:active {
color: #36312e;
text-decoration: underline;}

#inhaltsbox .standardre h3{
padding-top:0;
padding-bottom: 1.1em;
margin-top:0;
}

#hoch {
position: relative;
top: -45px;
right: 0;
font-size : 1em;
color : #be000e;
padding-bottom : 0;
z-index:2000;
width: auto;
display: block;
text-align: right;
height: 1px;
}

#hoch a:link, #hoch a:visited, #hoch a:hover, 
#hoch a:focus, #hoch a:active {
padding: 20px;
text-decoration : none;
color : #be000e;


}


#hoch a:hover, #hoch a:focus, #hoch a:active {
color : #be000e;

text-decoration : none;
}


p {
margin-bottom: 1.5em;
}
sup, sub {
  line-height: 1em;
}

p a:link, p a:visited, p a:hover, p a:focus, p a:active,
form a:link, form a:visited, form a:hover, form a:focus, form a:active{
color : #333;
font-weight : normal;
}

p a:hover, p a:focus, p a:active,
form a:hover, form a:focus, form a:active{
color : #83ad20;
}

p em {
font-style:normal;
color: #FF3A00;
color: #F31E15;
font-weight:normal;
}

p em strong {
color: #999;
font-weight: normal;
font-style: italic;
font-size:87%;
}

blockquote p em {
font-style:italic;
color: #484739;
font-weight:normal;
}

#starter a:link, 
#starter a:visited, 
#starter a:hover, 
#starter a:focus, 
#starter a:active {
text-decoration: none;
outline-color: #F5F5F5;
}

.einruck {
  width: 100%;
  display:block;
  float:left;
  padding:0;
  margin:0;
  height: auto;
  width: auto;
  
}

.links {
 float:left;
  width: 160px;
  padding:0;
  margin:0;
}
.rechts {
  margin-left: 153px;
  }
.rechts p {
  padding-top: 0.5em;
  padding-right:0;
   padding-left: 36px;
  }

.rechts li {
  padding-right:0;
  padding-bottom:0;
    padding-left: 20px;
  
  list-style-type:none;
  background-image : url(https://www.umstieg-21.de/assets/templates/img/liste-b.jpg);
background-repeat : no-repeat;
background-position : left 0.6em;
  
  margin-bottom:0;
  line-height: 1.2em;
  }

.rechts ul.verz {
  padding:0;
    margin:0;
  }
.rechts li a {
  color: #444;
    text-decoration: none;
  }
.rechts li a:hover {
  color : #83ad20;
      }

.links img {
  width:150px;
  height: 150px;
  border-radius:50%;
  position: relative;
  top: -1.7em;
  left:-1.4em;
}
#starter h6 {
  padding-left: 20px;
  margin-left: 170px;
  background-image : url(https://www.umstieg-21.de/assets/templates/img/liste-b.jpg);
background-repeat : no-repeat;
background-position : left 0.4em;
  }

#fuss {
text-align : left;
padding-top : 20px;
padding-right : 30px;
padding-bottom : 1px;
padding-left: 20px;
background-color: #36312e;
background-color: #004E98;

color: #fff;

}


#fuss h2, #fuss h2 strong {
color : #fff;
font-size: 1.1em;
font-weight : normal;
font-weight : 400;
padding-bottom: 5px;
margin-bottom:0;
}

#fuss p {
color : #fff;
font-size: 1em;

}



#fuss ul {
clear:both;
padding-top: 3em;
margin-bottom: 3em;
margin-left: -12px;

}

#fuss li {
display: inline;
color: #fff;
border-right: 1px solid #6a7b85;
padding-right: 12px;
padding-left: 12px;
}

#fuss li a:link {
color: #fff;
text-decoration : none;
}


#fuss li a:visited {
color : #fff;
}
#fuss li a:hover, #fuss li a:focus, #fuss li a:active {
color : #83AD20;
text-decoration : none;
}

#fussboxli{
float:left;
width: 47%;
margin-right: 3%;

}
#fussboxre {
float:left;
width: 47%;
margin-left: 3%;

}




.standardli{
float:left;
width: 47%;
margin-right: 3%;
}

.standardre{
float:left;
width: 47%;
margin-left: 3%;
max-width: 440px;
}

.standardre p {
margin-bottom:0;
font-size:87%;
font-style: italic;
}
.standardre p strong {
color: #999;
font-weight: normal;
}
.standardre em {
font-style:italic;
font-weight:bold;
color: #004E98;
}


.textli{
float:left;
width: 47%;
margin-right: 3%;
}

.textre {
float:left;
width: 47%;
margin-left: 3%;
}


#inhalt ul {
margin-bottom: 1em;
}

#inhalt ul li {
list-style-type: none;
color: #333;
}

#liste ul li {
list-style-type: none;
padding-left: 1em;
background-image : url(img/pfeil.gif);
background-repeat : no-repeat;
background-position : 0px 6px;
color: #333;
}
#liste li .last{
border-bottom : 1px solid #333;
padding-bottom: 1em;
}
#liste li li .last {
border-bottom : 0px;
padding-bottom: 0px;
}

#inhalt ul li a:link, #inhalt ul li a:visited{
color: black;
line-height: 1.5em;

}
#inhalt ul li a:hover {
color: #cc0066;
}
#inhalt ul ul  {
padding-left: 1em;

}

#inhalt .subnavi ul li.active a:link, #inhalt .subnavi ul li.active a:visited{
color: #cc0066;
}








#tabelle {

}

#tabelle table  {
margin:0;
margin-bottom : 2em;
padding:0;
width: 100%;

}

.subnavi {
position: absolute;
top:270px;
left: 15px;
}



#inhalt .subnavi ul li, #inhalt .zurueck ul li {
list-style-type: none;
padding-left: 1em;
background-image : url(../img/pfeil.gif);
background-repeat : no-repeat;
background-position : 0px 6px;
color: #333;
}
.zurueck a:link, .zurueck a:visited, 
.zurueck a:hover, .zurueck a:focus, .zurueck a:active {
color: #cc0066;
position: absolute;
left: 20px;
top: 90px;
padding-left: 1em;
}
.hoch {
text-align : right;

}

.hoch a {
color: #cc0066;text-decoration : none;
}

.minibild{
position : absolute; left: 470px;
}

#inhaltsbox #gal {
display: inline-block;
width: 102.2%;
}

#gal .thumbs li {
padding-right: 20px;
}

 
#gal p {
font-size: 0.75em;
}





 /* Styles fuers login */

#WebLoginLayer0 h3 {
margin-top:0;
margin-bottom: 2em;}

#WebLoginLayer0 label, #WebLoginLayer0 input {
position:relative;top: 0;
}

#WebLoginLayer0 input {
position:relative;top: -1.5em;
}

#WebLoginLayer0 input.button {
margin-top: 1em;
width: 300px;
}
fieldset #vergessen {
display: inline;}
#vergessen label {
position : relative;}

noscript {
position: relative; top: 20px;color: red;
}
.print {display : inline;}

a.skip {
    position: absolute;
    left: -1000em;
    width: 20em;
}
span.preis{font-weight:bold; text-align:right;margin:0;padding:0;margin-bottom:0.5em;}
span.rotelinie {border-bottom: solid 1px #333333;}

/* Styles fuer BLOG */

.ditto_1blog h3 a, .ditto_info a, .ditto_link{
color:#cc0066;
}
.ditto_info {
font-size: 80%;
}

p.pages {
border: solid 1px #ddd;
padding: 5px;
margin-top: 1em;
}

p.pages span {
display:inline;
padding: 5px;

}


.ditto_page, .pages a {
padding: 5px;
}




/*  ----------------------------------
Formulare
---------------------------------------*/
textarea {
width: 315px;
border:dotted 1px #425050;
}
input { 
width: 315px;
border:dotted 1px #425050;
height: 22px;
}
.button, .submit { 
color:#425050; 
margin-top:0.85em; 
margin-bottom: 1.4em;
width:315px;
}
.checkbox {
padding-left:0;
width: 30px;
}

.errors {margin: 0; 
margin-bottom: 1.4em;
color:#be000e;
font-size: 0.85em;}



#EmailForm fieldset, 
#shareForm fieldset,
#UnterzeichnenForm fieldset {
border:0;
width: 315px;
}


#EmailForm .text, 
#shareForm .text,
#UnterzeichnenForm .text {
background-color: #ededed;
border-right:0;
width: 315px;
border:dotted 1px #425050;
}
#EmailForm div, #shareForm div, 
#UnterzeichnenForm div {
margin:0;
padding-top: 1em;
}
fieldset img {
border: dotted 1px #425050;
}

#EmailForm input, #EmailForm textarea {
  background-color: #ededed;
  padding:2px;
}
#EmailForm #cfMessage, 
#shareForm #cfMessage,
#UnterzeichnenForm #cFMessage {
width: 315px;
background-color: #ededed;
border:dotted 1px #425050;
}
#UnterzeichnenForm input.button {
background-color: #be000e;
color: white;
font-weight: bold;
margin-top: 1em;
}
#UnterzeichnenForm label.check input#Checkbox_0{
width: 20px;
padding-top: 5px;
}
#UnterzeichnenForm label.check {
margin-top: 1em;
display:block;
}

a #rot {
font-weight: bold;
color: #be000e;

}
#box5oben {
margin-top:-3.5em;
margin-bottom: 1.5em;
}

#box5oben.box5 img {
width: 36px!important;
height: 36px!important;;
}
#box5oben.box5 .butset .buttext {
display:inline-block;
width: 100px;
position: relative;
top: -10px;
}

#aktuelles .clear {
padding-bottom: 0;
margin-bottom: 20px;
border-bottom: 1px solid #fff;
}

.teaser p {
padding-bottom:20px;
margin-bottom:0;
}

.bildbox img {
float:left;
margin-bottom: 20px;
margin-right: 20px;
}

ul.B_crumbBox {
margin-top: -30px;
  margin-left: -22px;
font-size: 77%;
 line-height: 1em;
  height: 5px;
}


ul.B_crumbBox li{
  float:left;
  width: auto; 
  list-style-type:none;
  margin-right: 5px;
  line-height: 1em;
}

.B_crumbBox a:link, .B_crumbBox a:visited, .B_crumbBox a:hover,
.B_crumbBox a:focus,.B_crumbBox a:active {
color: #484739;
}
.B_crumbBox a:hover,
.B_crumbBox a:focus,.B_crumbBox a:active {
color: #83ad20;
}

.einruck {
padding-left: 1.5em;
}


/*
 * Hide visually, but have it available for spam-bots
 * Use fake class name: confirmemail to prevent detection of keyword "hidden"
 */
.confirmemail {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

form span.error{
  color:red;
 }

form span.error + span.error{
display:none;
}


form span.error + span.error{
display:none;
}