/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: width .75s ease-out;
-webkit-transition: width .75s ease-out;
transition: width .75s ease-out;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.section { clear: both;
margin: 0rem;
background:transparent;
}

html {
font-family:"Barlow Condensed", "Futura Lt BT", Arial, Helvetica;
font-size:62.5%;
line-height:1.5;

font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}


body {
font-size:1.9rem;
margin: 0 auto;
background-color:#fff;
color:#000;
margin:0rem;
}

.container_haupt {
margin:0rem;
background-color:#fff;
width: 100%;
}

/* überschriften */
h1, h2, h3, h4, h5 {
font-weight:normal;
}

h1 {
font-size:2.4rem;
font-style: bold;
line-height: 2.8rem;
margin-top: 0rem;
margin-bottom: 2rem;
}

h2 {
font-size:2rem;
line-height: 2.3rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
}

h3 {
font-size:1.8rem;
line-height: 2rem;
margin-top: 1rem;
margin-bottom:1rem;
}



img {max-width: 100%;
height: auto;
padding:0rem;
margin:0rem;
}



/* ############################################################ */
/* allgemein - speziell*/
/* ############################################################ */

.eingerueckt-aussen {padding:1rem 1rem 1rem 1rem ;}

.eingerueckt-innen  {padding:0.5rem 0.5rem 0.5rem 0.5rem;}


.hpname1 {
font-size: 2.5rem;
padding-left:0rem;
padding-right:1rem;
color:#ffffff;
}

.fussname {
color:#000000;
text-shadow:0rem 0rem 0.1rem #ffffff;
font-size:1.6rem;
margin:1rem 0rem 1rem 0rem;
}

.fussname span {
color:#000;
background:transparent;
}

.bild-im-text {
display:block;
max-width:80%;
margin:4rem auto;
border:solid  0.1rem;
box-shadow: 0rem 0rem 0.4rem #000;
border-color: #3C3C3C #252525 #252525;
}

.bild-im-text-re {
display:block;
max-width:80%;
margin:4rem auto;
box-shadow: 0rem 0rem 0.4rem #000;
border-color: #3C3C3C #252525 #252525;
}


/* = = = = = = = = = = = = = = = = = = = = = =  */
/* ribbon band beim logo */
/* = = = = = = = = = = = = = = = = = = = = = =  */

 .ribbon-wrapper {
width : 0;
position : relative;
}
.ribbon-front {
background-color : #fff;
background-image:url(images/back_stripe06.png);
background-repeat:repeat;
background-position:50% 50%;
width : 31rem;
position : relative;
left : -2rem;
z-index : 2;
padding : 1.5rem 1rem 1.5rem 1rem;
}
.ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
position : absolute;
z-index : 1;
border-style : solid;
height : 0;
width : 0;
}
.ribbon-edge-bottomleft, .ribbon-edge-bottomright {
top : 4rem;
}
.ribbon-edge-topleft, .ribbon-edge-bottomleft {
left : -2rem;
border-color : transparent #272727 transparent transparent;
}
.ribbon-edge-topleft {
top : -1rem;
border-width : 1rem 2rem 0 0;
}
.ribbon-edge-bottomleft {
border-width : 0 2rem 0 0;
}
.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 27rem;
border-color : transparent transparent transparent #272727;
}
.ribbon-edge-topright {
top : -1rem;
border-width : 1rem 0 0 2rem;
}
.ribbon-edge-bottomright {
border-width : 0 0 0 2rem;
}
.ribbon-back-left {
position : absolute;
top : -1rem;
left : 0;
width : 0;
height : 4rem;
z-index : 0;
}
.ribbon-back-right {
position : absolute;
top : -1rem;
right : 0;
width : 0;
height : 4rem;
z-index : 0;
}


/* = = = = = = = = = = = = = = = = = = = = = =  */
/* SCHRÄG GESTELLTER ribbon style */
/* = = = = = = = = = = = = = = = = = = = = = =  */

.ribbon-container {
  width: 100%; height: 100%;
  position: relative;
  background: transparent;
}
.ribbon {
  position: absolute;
  left: -0.5rem; top: -0.5rem;
  z-index: 1;
  overflow: hidden;
  width: 7.5rem; height: 7.5rem;
  text-align: right;
}
.ribbon span {
  font-size: 1.4rem;
  font-weight: normal;letter-spacing:0.1rem;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 2rem;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 10rem;
  display: block;
  background: firebrick;
  background: linear-gradient(#D93737 0%, #7E1818 100%);
  box-shadow: 0 0.3rem 1rem -0.5rem rgba(0, 0, 0, 1);
  position: absolute;
  top: 1.9rem; left: -2.1rem;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0rem; top: 100%;
  z-index: -1;
  border-left: 0.3rem solid #DC4747;
  border-right: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-top: 0.3rem solid #DC4747;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0rem; top: 100%;
  z-index: -1;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid #DC4747;
  border-bottom: 0.3rem solid transparent;
  border-top: 0.3rem solid #DC4747;
}




/* ############################################################ */
/* bereich TOP */
/* ############################################################ */

.bereich-top {background:transparent;color:#fff;}

.zelle-top {display: table-cell;
width:100%;
padding:0rem;
}


/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.bereich-logo {background-color:white;
color:#fff;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
}

.bereich-logo hr {text-align:center;
border:none;
width:100%;
border-bottom: solid 0.1rem #f07f07;
height:0.1rem; }

.bereich-logo .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-logo {display: table-cell;
width:100%;
height:100vh;
padding:0rem;
text-align:center;
vertical-align:middle;
}

.logo_aussen {
display: table;
margin:0 auto;
}

.logo {display: table-cell;
width:27rem;
height:38rem;
padding:0rem;
background-color:rgba(178, 34, 34, 0.7);
margin:0 auto;
vertical-align: middle;
color:#ffffff;
background-image:url(images/menu_lueckenfueller.png);
background-repeat:repeat;
background-position:50% 50%;
border:solid 0.1rem #220606;
-webkit-box-shadow:0rem 0rem 1rem #000;
box-shadow:0rem 0rem 1rem #000;
}


/* ############################################################ */
/* bereich info 1 */
/* ############################################################ */

.bereich-info1  {background-color:#ffffff;
color:#000000;
border-bottom:solid 0.1rem black;
background-image:url(images/back_stripe06.png);
background-repeat:repeat;
background-position:50% 50%;
}

.bereich-info1 h2 {color:#000000}

.bereich-info1  .button-cont {text-align:center;}

.bereich-info1 .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0.2rem 0.2rem;
}

.bereich-info1 .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.zelle-info1a {display: block;
width: 100%;
background-color:#727272;
background-color:rgba(114, 114, 114, 0.4); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.zelle-info1b {display: block;
width: 100%;
background-color:#727272;
background-color:rgba(114, 114, 114, 0.4); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.zelle-info1c {display: block;
width: 100%;
background-color:#727272;
background-color:rgba(114, 114, 114, 0.4); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.bereich-info1 .text {
padding:2rem 2rem 5rem 2rem;
text-align:center;
}

.bereich-info1 .foto {
padding:0rem;
margin:0rem;
text-align:center;
}

/* ############################################################ */
/* bereich info 2 */
/* ############################################################ */

.bereich-info2  {background-color:#252525;
color:#ffffff;
border-bottom:solid 0.1rem black;
background-image:url(images/back_stripe02.png);
background-repeat:repeat;
background-position:50% 50%;
}

.bereich-info2 h2 {color:#ffffff}

.bereich-info2  .button-cont {text-align:center;}

.bereich-info2 .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0.2rem 0.2rem;
}

.bereich-info2 .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.zelle-info2a {display: block;
width: 100%;
background-color:#0A0A0A;
background-color:rgba(10, 10, 10, 0.5); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.zelle-info2b {display: block;
width: 100%;
background-color:#0A0A0A;
background-color:rgba(10, 10, 10, 0.5); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.zelle-info2c {display: block;
width: 100%;
background-color:#0A0A0A;
background-color:rgba(10, 10, 10, 0.5); /* 4. Wert stellt Transparenz dar */
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.bereich-info2 .text {
padding:2rem 2rem 5rem 2rem;
text-align:center;
}


.bereich-info2 .foto {
padding:0;
margin:0;
text-align:center;
}


/* ############################################################ */
/* bereich zwischenfeld  */
/* ############################################################ */

.bereich-zwischenfeld {
border-bottom:solid 0.1rem black;
background-image:url(images/pic_bg_player_red.png);
background-repeat:no-repeat;
background-position:60% 60%;
color:#000;
}

.bereich-zwischenfeld h2 {color:#000000}

.bereich-zwischenfeld  .button-cont {text-align:center;}

.bereich-zwischenfeld .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0.2rem 0.2rem;
}

.bereich-zwischenfeld .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.zelle-zwischenfeld {display: block;
width: 100%;
background-color:#a5a5a5;
text-align:center;
margin-bottom:2rem;
vertical-align:top;
}

.bereich-zwischenfeld .text {
padding:1rem 1rem 1rem 1rem;
text-align:center;
}

.bereich-zwischenfeld .foto {
padding:0rem;
margin:0rem;
text-align:center;
}


/* ############################################################ */
/* bereich slogan  */
/* ############################################################ */

.bereich-slogan {background-color:#efefef;
color:#fff;
text-align:center;
vertical-align:middle;
}

.bereich-slogan h1, .bereich-slogan h2 {color:#fff;text-align:center;}

.bereich-slogan .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-slogan {display: block;
width:100%;
padding:0rem;
background-size:cover;
text-align:center;
vertical-align:middle;
}

/* ############################################################ */
/* bereich formular  */
/* ############################################################ */

.bereich-form {background-color:#ffffff;
border-bottom:solid 0.1rem black;
background-image:url(images/pic_hintergrund_contact.png);
background-repeat:no-repeat;
background-position:60% 60%;
color:#000000;
}

.bereich-form h1, .bereich-form h2 {color:#000000;text-align:left;}

.bereich-form .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-form {display: block;
width:100%;
padding:0rem;
background-size:cover;
text-align:center;
vertical-align:middle;
}

/* -----formular----- */
form {display:table;
width:100%;
margin:0 auto;
text-align:left;
color:#000000;
/* text-shadow:0.1rem 0.1rem 0.1rem #000; Schatten in den Beschriftungen der Formularfelder */
}

textarea, input {
height:2rem; /* Höhe Formularfelder */
width:80%;
padding:0.6rem;
background:transparent;
border:solid 0.1rem black;
border-radius:0.6rem;
margin-bottom:0.3rem;
text-shadow:none;
font-size:1rem;
background-color:rgba(239, 239, 239, 0.7);
}

textarea {
height:20rem;
overflow: auto;
}

#senden {background-color:#efefef;
color:firebrick;text-shadow:none;
padding:0rem;
}

input:focus, textarea:focus {
background-color:rgba(239, 239, 239, 0.6);
}

/* animation-drehen vom diamant über die klasse fa-spin in der css-datei font-awesome.min.css */
.bereich-form .fa-diamond {
color:#000;
text-shadow:none;}

/* -----ende formular----- */


/* ############################################################ */
/* bereich inhalt - auf den unterseiten */
/* ############################################################ */

.bereich-inhalt {background-color:#252525;color:#838383;}
.bereich-inhalt h1, .bereich-inhalt h2,  .bereich-inhalt h3  {color:#B2B2B2;}

.zelle-inhalt{display: block;
width: 100%;
min-height:40rem;
}

.bereich-inhalt .eingerueckt-innen  {padding:0rem 0.5rem 0rem 0.5rem;}



/* ############################################################ */
/* bereich personal */
/* ############################################################ */

.bereich-personal {background-color:#efefef;
color:#727272;
border-bottom:solid 0.1rem black;
background-image:url(images/xback_stripe06.png);
background-repeat:repeat;
background-position:50% 50%;
}

.bereich-personal h2 {text-align:center;color:#000}

.bereich-personal .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 2rem 0rem;
}

.bereich-personal .zelle {display:table-cell;
width:100%;
vertical-align:top;
border-collapse:separate;
}

.zelle-personal-a {display: block;
width: 100%;
text-align:right;
margin-bottom:2rem;
vertical-align:top;
text-align:center;
}

.zelle-personal-b {display: block;
width: 100%;
text-align:left;
margin-bottom:2rem;
vertical-align:top;
text-align:center;
}

.bereich-personal .fa {color:#f07f07; /*Icons Strasse, Ort, etc. im Footer*/
}


/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

.bereich-fuss {background-color:#c9c9c9;color:#EFEFEF;
text-shadow:none;
background-image:url(images/back_point.png);
background-repeat:repeat;
background-position:50% 0%;
}

.bereich-fuss .tabelle {display: table;
width:100%;
table-layout:fixed;
border-spacing: 0rem 0rem;
}

.zelle-fuss {display:block;
width: 100%;
text-align:center;
margin-bottom:0.1rem;
padding:1rem;
}





/* ############################################################ */
/* R  E  S  P  O  N  S  I  V  E */
/* ############################################################ */

/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

.bereich-inhalt .eingerueckt-innen  {padding:0rem 1rem 0rem 1rem;}


}


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

.logo {
width:36rem;
height:28rem;
}

.ribbon-front {
width : 40rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 36rem;}

#senden {
width:16rem;
}

}

/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {

.eingerueckt-aussen {padding:5rem 0.5rem 5rem 0.5rem;}
.eingerueckt-innen  {padding:2rem 8rem 2rem 8rem;}
.bereich-inhalt .eingerueckt-innen  {padding:2rem 3rem 0rem 3rem;}


.logo {
width:46rem;
height:32rem;
}

.ribbon-front {
width : 50rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 46rem;
}

.bereich-info1 .text {
padding:2rem 1rem 5rem 1rem;
border-radius:10px
}

.bereich-info2 .text {
padding:2rem 1rem 5rem 1rem;
}

.zelle-info1a {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-info1b {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-info1c {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-info2a {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-info2b {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-info2c {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.bereich-zwischenfeld .text {
padding:2rem 1rem 5rem 1rem;
border-radius:10px
}

.zelle-zwischenfeld {display: table-cell;
border-bottom-left-radius:2rem;
border-bottom-right-radius:2rem;
}

.zelle-personal-a {display: table-cell;
text-align:right;
}

.zelle-personal-b {display: table-cell;
text-align:left;
}

zelle-inhalt {display:table-cell;
}

zelle-form {display:table-cell;
}

zelle-fuss {display:table-cell;
}


}

/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

.logo {
width:48rem;
height:30rem;
}

.ribbon-front {
width : 52rem;padding-left:4rem;padding-right:4rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 48rem;
}

form {
width:40rem
}


}


/* ==================================== ab 680 pixel ================================== */
@media (min-width: 680px) {

html {
font-size:64%;
}


}

/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {
font-size:66.5%;}


.eingerueckt-aussen {padding:6rem 1rem 6rem 1rem ;}
.eingerueckt-innen  {padding:2rem 10rem 2rem 10rem;}

.logo {
width:40rem;
height:50rem;
}

.ribbon-front {
width : 44rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 40rem;
}

.bereich-info1 .tabelle {
border-spacing: 0.7rem 0.7rem;
}

.bereich-info2 .tabelle {
border-spacing: 0.7rem 0.7rem;
}

.bereich-zwischenfeld .tabelle {
border-spacing: 0.7rem 0.7rem;
}

.zelle-inhalt {text-align:justify;}

form {
width:50rem}

.zelle-fuss {display:table-cell;
padding:0.4rem;
}


}

/* ===================================== ab 800 pixel ================================= */

@media (min-width: 800px) {

.logo {
width:40rem;
height:48rem;
}

.ribbon-front {
width : 44rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 40rem;
}

.bild-im-text {float:left;max-width:30%;
margin-top:1rem;margin-right:1.5rem;margin-bottom:0rem;
margin-left:0rem;
}

.bild-im-text-re {float:right;max-width:30%;
margin-top:1rem;margin-left:1.5rem;margin-bottom:0rem;
margin-right:0rem;
}

}

/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

html {
font-size:69%;}

.logo {
width:44rem;
height:42rem;
}


.ribbon-front {
width : 48rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 44rem;
}

.bereich-info1 .tabelle {
border-spacing: 1rem 1rem;
}

.bereich-info2 .tabelle {
border-spacing: 1rem 1rem;
}

.bereich-info1 .text {
padding:2rem 2rem 5rem 2rem;
text-align:center;
}

.bereich-info2 .text {
padding:2rem 2rem 5rem 2rem;
text-align:center;
}

.bereich-zwischenfeld .tabelle {
border-spacing: 1rem 1rem;
}

.bereich-zwischenfeld .text {
padding:2rem 2rem 5rem 2rem;
text-align:center;
}

.bereich-personal .tabelle {
border-spacing: 3rem 0rem;
}

.bild-im-text {
margin-top:1rem;margin-right:2rem;margin-bottom:0.5rem;
margin-left:0rem;
}

.bild-im-text-re {
margin-top:1rem;margin-left:2rem;margin-bottom:0.5rem;
margin-right:0rem;
}




}

/* ===================================== ab 1280 pixel ================================= */

@media (min-width: 1280px) {

html {
font-size:72%;}

.eingerueckt-aussen {padding:8rem 5rem 8rem 5rem;}
.eingerueckt-innen  {padding:2rem 10rem 2rem 10rem;}

.logo {
width:54rem;
height:32rem;
}

.ribbon-front {
width : 58rem;
}

.ribbon-edge-topright, .ribbon-edge-bottomright {
left : 54rem;
}



}

/* ===================================== ab 1420 pixel ================================= */

@media (min-width: 1420px) {

html {
font-size:82%;
}

.eingerueckt-aussen {padding:8rem 6rem 8rem 6rem;}
.eingerueckt-innen  {padding:2rem 10rem 2rem 10rem;}


}





/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */