/* CSS by J.Krausz | based on HTML5 Boilerplate */

html {
overflow-y:scroll;
}

html,
input,
select,
textarea {
color:#444;
}

body {
font-size:9.5pt;
line-height:1.4;
}

::-moz-selection {
background:#b3d4fc;
text-shadow:none;
}

::selection {
background:#b3d4fc;
text-shadow:none;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
}

img {
vertical-align:middle;
}

/* Remove default fieldset styles. */

fieldset {
border:0;
margin:0;
padding:0;
}

textarea {
resize:vertical;
}

/* === Chrome Frame prompt === */

.chromeframe {
margin:0.2em 0;
background:#ccc;
color:#000;
padding:0.2em 0;
}

/* Image replacement */

.ir {
background-color:transparent;
border:0;
overflow:hidden;
/* IE 6/7 fallback */
*text-indent:-9999px;
}

.ir:before {
content:"";
display:block;
width:0;
height:150%;
}

/* Hide from both screenreaders and browsers:h5bp.com/u */

.hidden {
display:none !important;
visibility:hidden;
}

/* Hide only visually, but have it available for screenreaders:h5bp.com/v */

.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}

/* Extends the .visuallyhidden class to allow the element to
   be focusable when navigated to via the keyboard:h5bp.com/p */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}

/* Hide visually and from screenreaders,but maintain layout */

.invisible {
visibility:hidden;
}

/* clearfix: contain floats */

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

.clearfix:after {
clear:both;
}

/* IE 6/7 only */
.clearfix {
*zoom:1;
}

a {
/* outline:none; */
}

/* ========== DESIGN ======== */



html,body {
padding:0;
margin:0;
}

html,body,input,textarea,select,button,a.button {
font-family:"OpenSans","Segoe UI","Myriad Pro","Myriad","DejaVu Sans",Sans-Serif;
}

html {
overflow-y:scroll;
min-height:100%;
background:#c5c5a7;
background-size:cover;
}


/* === GRID KLASSEN === */

div.grid_test {
clear:both;
padding:0 52px;
margin:0;
position:relative;
z-index:10000;
}

div.grid_test .box {
outline:1px dotted rgba(0,0,0,0.3);
outline-offset:-1px;
background:#fff;
}

div.grid_wrapper {
clear:both;
padding:0;
margin:0;
position:relative;
}

.span1  { width:7%; }
.span2  { width:15.333%; }
.span3  { width:23.667%; }
.span4  { width:32%; }
.span5  { width:40.333%; }
.span6  { width:48.667%; }
.span7  { width:57%; }
.span8  { width:65.333%; }
.span9  { width:73.667%; }
.span10 { width:82%; }
.span11 { width:90.333%; }
.span12 { width:98.667%; }

.push1  { margin-left:9%; }
.push2  { margin-left:17.333%; }
.push3  { margin-left:25.667%; }
.push4  { margin-left:34%; }
.push5  { margin-left:42.333%; }
.push6  { margin-left:50.667%; }
.push7  { margin-left:59%; }
.push8  { margin-left:67.333%; }
.push9  { margin-left:75.666%; }
.push10 { margin-left:84%; }
.push11 { margin-left:92.333%; }

.pull1  { margin-right:9%; }
.pull2  { margin-right:17.333%; }
.pull3  { margin-right:25.667%; }
.pull4  { margin-right:34%; }
.pull5  { margin-right:42.333%; }
.pull6  { margin-right:50.667%; }
.pull7  { margin-right:59%; }
.pull8  { margin-right:67.333%; }
.pull9  { margin-right:75.666%; }
.pull10 { margin-right:84%; }
.pull11 { margin-right:92.333%; }

/* === BOXEN/PADS === */

.box {
position:relative;
display:block;
float:left;
margin:0 0.667% 12px 0.667%;
padding:0;
}

.pad16 {
display:block;
padding:16px;
position:relative;
}

.pad12 {
display:block;
padding:12px;
position:relative;
}

.box .imgright{
float:right;
}

.box>* { margin-top:0;  }
.pad16>* { margin-top:4px; }
.pad12>* { margin-top:4px; }


/* === FARBEN === */

.color-dark { color:#000; }
.color-bg-dark { background-color:#000; }

.color-shade { color:#71436f; }
.color-bg-shade { background-color:#71436f; }

.color-medium { color:#a569a3; }
.color-bg-medium { background-color:#a569a3; }

.color-medium-light { color:#dcb6db; }
.color-bg-medium-light { background-color:#dcb6db; }

.color-light { color:#edebdd; }
.color-bg-light { background-color:#edebdd; }

.color-bright { color:#f5f5ee; }
.color-bg-bright { background-color:#f5f5ee; }

.color-red { color:#66af05; }
.color-bg-red { background-color:#66af05; }

.color-green { color:#8AB138; }
.color-bg-green { background-color:#8AB138; }



/* ========================================================= */

/* === STANDARDELEMENTE === */

br.clear {
height:0;
margin:0;
padding:0;
clear:both;
}

hr {
border-color:#D3D1C0;
}

div#header hr {
border-color:#dcb6db;
}

span.break_on_mobile {
display:inline;
}

.floatleft {
float:left;
margin-right:1em;
}


.floatright {
float:right;
margin-left:1em;
}


.clear {
clear:both;
}

.clearleft {
clear:left;
}

.clearright {
clear:right;
}

.inline {
display:inline-block;
}


/* == reveal_mb Email Obfuscation == */

span.reveal_mb {
color:#4DA6B4;
-webkit-user-select:none;
-moz-user-select:-moz-none;
-moz-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

span.reveal_mb .a {
display:inline-block;
width:0.9em;
height:0.8em;
font-size:82%;
line-height:0.7em;
text-align:center;
border:1px solid #4DA6B4;
border-right:none;
border-radius:100%;
font-style:italic;
margin:0 0 0 0.1em;
position:relative;
top:-1px;
}

span.reveal_mb .d {
position:relative;
top:0.3em;
}


/* == style classes == */

.italic {
font-style:italic;
}

.center {
text-align:center;
}


/* === LAYOUT BLÖCKE UND STANDARDELEMENTE === */

#header,
#main,
#footer {
z-index:10;
width:960px;
margin:0 auto;
position:relative;
top:-1px;
}

#header {
margin-top:2em;
padding-bottom:2em;
}

#footer {
margin-bottom:2em;
}

.center_wrapper {
padding:0 48px;
position:relative;
}

.top-border {
height:6px;
margin:0;
padding:0;
}


#header div.identity {
position:relative;
padding-top:40px;
}

#header img.logo {
margin:0;
padding:0;
float:right;
position:relative;
top:-22px;
right:-8px;
}

#header h1.site_title a {
margin:0.5em 0;
font: normal normal 24pt/0.8em Kontrapunkt,Sans-Serif;
text-transform:uppercase;
text-decoration:none;
letter-spacing:0.03em;
color:inherit;
font-weight:300;
}

#header h1.site_title a:hover {
color:inherit;
}

#header h2.site_subtitle {
font-size:11.4pt;
line-height:1.44em;
text-transform:uppercase;
letter-spacing:0.03em;
font-weight:500;
}


/* MAIN NAV */

div#main_nav_wrapper {
clear:both;
margin-top:-12px;
}

ul.main_nav {
font-size:10pt;
font-weight:900;
text-transform:uppercase;
letter-spacing:0.1em;
line-height:1.6em;
color:#71436f;
position:relative;
list-style:none;
display:table;
width:100%;
padding:0;
margin:0 0 3em 0;
border-top:1px solid #dcb6db;
border-bottom:1px solid #dcb6db;
}

ul.main_nav li {
display:table-cell;
margin:0;
padding:0;
text-align:center;
}

ul.main_nav li a {
color:inherit;
position:relative;
display:block;
padding:4px;
text-decoration:none;
outline:0;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}

ul.main_nav li.selected>a {
cursor:default;
}

ul.main_nav li.selected a,
ul.main_nav li a:hover {
color:#dcb6db;
}

ul.sub_nav {
font-weight:500;
background:#dcb6db;
color:#000;
position:absolute;
top:3em;
left:0;
list-style:none;
width:100%;
margin:0;
padding:0;
border-top:0;
border-bottom:0;
display:none;
}

ul.main_nav li.selected ul.sub_nav {
display:table;
}


/* ul.main_nav li.has_subnav a:hover:after, */
ul.main_nav li.selected.has_subnav>a:after {
content:"";
position:absolute;
bottom:-11px;
left:50%;
margin-left:-10px;
width:0;
height:0;
border:10px solid #dcb6db;
border-top-color:transparent;
border-right-color:transparent;
border-left-color:transparent;
}


ul.sub_nav li a {
color:#000!important;
cursor:pointer;
}

ul.sub_nav li.selected a,
ul.sub_nav a:hover {
/* background:#edebdd!important;*/
font-weight:bold;
}

ul.sub_nav li.selected a{
cursor:default;
}

/* SHOWCASE */

div#showcase {
position:relative;
margin-top:40px;
}

ul.slideshow {
margin:0;
padding:0;
list-style:none;
position:relative;
}

ul.slideshow li {
display:block;
margin:0;
padding:0;
list-style:none;
width:100%;
}


ul.slideshow p,
ul.slideshow blockquote {
font: normal normal 14pt/1.4em Georgia,Serif;
margin-bottom:0.6em;
color:#f2e2f2;
}

ul.slideshow a {
color:inherit;
}


/* MAIN */

div#main {
padding:40px 0 24px 0;
}

div#main h1,
div#main h2,
div#main h3 {
font-weight:500;
}

div#main h1,
div#main h2 { font-size:24pt; }

div#main h3 { font-size:16pt; }

div#main h4,
div#main h5,
div#main h6 {
font-weight:500;
}

div#main h4 { font-size:12pt; font-weight:bold;}
div#main h5 { font-size:10pt; }

div#main h6 {
font-size:9pt;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
}

div#main p,
div#main blockquote {
font: normal normal 12pt/1.5em Georgia,Serif;
margin-bottom:0.8em;
}


/* FOOTER */

div#footer {}

div#footer .top-border {}

div#footer h1,
div#footer h2,
div#footer h3,
div#footer h4,
div#footer h5,
div#footer h6 {
font-size:10pt;
font-weight:bold;
}

div#footer a {
text-decoration:none;
color:inherit;
}

div#footer a:hover {
border-bottom:1px dotted #555;
}

div#footer ul.footer_nav {
list-style:none;
margin:0;
padding:0;
font-size:11pt;
border-top:1px solid #4D4C41;
}

div#footer ul.footer_nav li {
border-bottom:1px solid #4D4C41;
}

div#footer ul.footer_nav li a,
div#footer ul.footer_nav li p {
display:block;
padding:0.3em 0.3em 0.3em 1em;
line-height:1.2em;
}


div#footer ul.info {
list-style:none;
margin:1em auto;
text-align:center;
padding:0;
}

div#footer ul.info li {
display:inline;
padding:0 7px 0 6px;
border-right:1px solid #bbb;
}

div#footer ul.info li:last-child {
border-right:none;
}

div#footer ul.info * {
font-size:8pt!important;
line-height:11pt!important;
}


/* === KOMBINIERBARE BOX KLASSEN === */

.whitebg {
background:#f5f4f0;
}

.shadow {
box-shadow:0 1px 7px #aaa;
-webkit-box-shadow:0 1px 7px rgba(0,0,0,0.4);
box-shadow:0 1px 7px rgba(0,0,0,0.4);
}

/* === MAIN CONTENT ELEMENTE === */

div#main a {
text-decoration:none;
color: #71436f;
font-weight:bold;
}

div#main a:hover {
text-decoration:none;
border-bottom:1px dotted #000;
}

div#main .cdist {
padding:12px 00px;
}


div#main h2.circle {
position:relative;
font-family:Kontrapunkt,Sans-Serif;
font-size:13.5pt;
padding:13px 00px;
padding-bottom: 35px;
font-weight:600;
text-transform:uppercase;
text-align:center;
}

div#main h2.circle:before {
content:"";
position:absolute;
top:0;
left:50%;
margin:16px -48px;
width:96px;
height:96px;
border-radius:100%;
background-color:#f5f5ee;
z-index:0;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}

div#main h2.circle:hover:before {
content:"";
position:absolute;
top:0;
left:50%;
margin:0 -64px;
width:128px;
height:128px;
}

div#main h2.circle a {
display:block;
position:relative;
z-index:1;
color:#66af05; 
}

div#main h2.circle a:hover {
border:none;
}

button,
a.button,
input[type="submit"] {
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
margin:0;
padding:0 1em;
height:28pt;
line-height:28pt;
font-size:12pt;
text-align:center;
text-decoration:none;
font-weight:500;
background-color:#dcb6db;
color:#edebdd;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-o-transition:all 0.3s;
transition:all 0.3s;
}

button:hover,
a.button:hover,
input[type="submit"]:hover {
background-color:#c486c2;
}

div#header button,
div#header a.button,
div#header input[type="submit"] {
background-color:#dcb6db;
color:#71436f;
}

div#header button:hover,
div#header a.button:hover,
div#header input[type="submit"]:hover {
background-color:#edebdd;
}

/* TEXTBEDINGUNGEN UND -ANSCHNITT */

.lines2 {
display:block;
height:2.8em;
overflow:hidden;
}

.lines4 {
display:block;
height:5.6em;
overflow:hidden;
}

.truncate {
overflow:hidden;
text-truncate:ellipsis; /* nur moderne Browser */
}


/* === FARB KLASSEN === */

.cyan {
color:#62B9C6;
}

.cyanbg {
background-color:#62B9C6;
color:#fff;
}

.arrow-white {
width:1px;
padding:0 5px;
margin:0 3px;
background:url(img/arrows11px_white.png) 0 center no-repeat;
}

.arrow-right  { background-position:0 center; }
.arrow-bottom { background-position:-11px center; }
.arrow-left   { background-position:-22px center; }
.arrow-top    { background-position:-33px center; }


/* SUBNAV */

div#main div.sub_nav * {
text-shadow:0 1px 0 #fff;
}

div#main div.sub_nav h1,
div#main div.sub_nav h2,
div#main div.sub_nav h3,
div#main div.sub_nav h4,
div#main div.sub_nav h5,
div#main div.sub_nav h6 {
font:italic normal 12pt/1em Georgia,Serif;
color:#3A5900;
margin-left:1em;
}

div#main ul.sub_nav {
margin:0 0 1.6em 0;
font-size:11pt;
font-weight:bold;
text-transform:uppercase;
list-style:none;
padding:0;
border-top:1px solid #aaa;
}

div#main ul.sub_nav li {
border-bottom:1px solid #aaa;
}

div#main ul.sub_nav li a {
color:#4d4d4d;
display:block;
padding:0.3em 0.3em 0.3em 1.8em;
line-height:1.2em;
}

div#main ul.sub_nav li a:hover {
border-bottom:none;
background-color:#F7F5F2;
background-color:rgba(255,255,255,0.54);
}

div#main ul.sub_nav li a:hover:after {
content:"›";
float:right;
margin-right:1em;
font-size:15pt;
font-weight:bold;
position:relative;
top:-2px;
}


/* === FORMS === */

form {
margin:2em 0 0 0;
position:relative;
}

form label {
display:none;
}

/* placeholder styles müssen separat notiert werden */

form input[type="text"]::-webkit-input-placeholder {
color:#222;
font-style:italic;
}
form input[type="text"]:-moz-placeholder {
color:#222;
font-style:italic;
}
form input[type="text"]::-moz-placeholder {
color:#222;
font-style:italic;
}
form input[type="text"]:-ms-input-placeholder {
color:#222;
font-style:italic;
}

form option[disabled] {
color:#222;
font-style:italic;
}

form option {
margin:5px 8px;
}


form input[type="text"],
form select {
-moz-box-sizing:border-box!important;
-webkit-box-sizing:border-box!important;
box-sizing:border-box!important;
background-color:#B3B5AB;
border-radius:3px;
border:none;
padding:4px 6px;
width:100%;
color:#222;
font-style:italic;
margin-bottom:0.7em;
}

form input[type="text"]:focus,
form select:focus {
background:#fff;
-webkit-box-shadow:inset 0 1px 4px #aaa;
box-shadow:inset 0 1px 4px #aaa;
}


/* ####################### */
/* #### MEDIA QUERIES #### */
/* ####################### */


/* TABLETS UND ANDERE SCHMALE SCREENS */

@media screen and (max-width:768px) {}


/* SMARTPHONES MQ */

@media screen and (max-width: 480px),
@media screen and (max-device-width: 480px) and (orientation: portrait),
@media screen and (min-device-width: 320px) and (max-device-width: 768px) and (orientation: portrait) {


  body {
  background:none transparent;
  font-size:11pt;
  }

  div.center_wrapper,
  div.grid_test {
  padding:1em 0;
  width:94%;
  margin:3%;
  }

  #header,
  #main,
  #footer {
  width:96%;
  margin:2%;
  }

  .box {
  position:relative;
  display:block;
  float:none;
  margin:0;
  height:auto!important;
  }

  .pad16,
  .pad12 {
  width:auto!important;
  height:auto!important;
  }

  .span1, .span2, .span3, .span4,
  .span5, .span6, .span7, .span8,
  .span9, .span10, .span11, .span12 {
  width:auto!important;
  height:auto!important;
  }

  .push1, .push2, .push3, .push4,
  .push5, .push6, .push7, .push8,
  .push9, .push10, .push11,
  .pull1, .pull2, .pull3, .pull4,
  .pull5, .pull6, .pull7, .pull8,
  .pull9, .pull10, .pull11 {
  margin-left:0;
  margin-right:0;
  }

  .floatleft,
  .floatright {
  float:none;
  margin:0;
  }

  .clearleft,
  .clearright {
  clear:both;
  }

  .center_wrapper {
  width:100%;
  margin:0;
  }

  #header {
  padding-bottom:0;
  }

  #header div.identity {
  text-align:center;
  padding-top:1em;
  }

  #header img.logo {
  float:none;
  margin:0 0 -2em -4.2em;
  }

  #header h1.site_title a {
  margin:0.5em 0;
  font-size:24pt;
  }

  #header h1.site_title a:hover { }

  #header h2.site_subtitle {
  font-size:11.4pt;
  line-height:1.44em;
  }

  span.break_on_mobile {
  display:block;
  width:0;
  height:0;
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
  }

  br.nomobile,
  br.clear {
  display:none;
  }

  /* MAIN NAV */

  div#main_nav_wrapper {
  position:relative;
  top:-2em;
  margin:0 3%;
  width:94%;
  background:none;
  }

  ul.main_nav {
  font-size:1.1em;
  padding:0;
  text-align:center;
  }

  ul.main_nav {
  display:block;
  top:4em;
  }

  ul.main_nav li {
  display:block;
  margin:0;
  padding:0;
  border-top:1px solid #dcb6db;
  }

  ul.main_nav li:first-child {
  border-top:none;
  }

  ul.main_nav li a {
  border-right:none;
  }

  ul.main_nav li.selected a {}

  ul.main_nav li.selected a,
  ul.main_nav li a:hover {}

  /* SUBNAV */

  ul.sub_nav {
  position:relative;
  top:0;
  font-size:92%;
  padding:0.3em 0;
  }


  /* ul.main_nav li.has_subnav a:hover:after, */
  ul.main_nav li.selected.has_subnav>a:after {
  border:none;
  }

  ul.sub_nav li a {
  color:#000;
  cursor:pointer;
  }

  ul.sub_nav li.selected a,
  ul.sub_nav a:hover {
  color:#fff;
  font-weight:bold;
  }

  ul.sub_nav li.selected a{
  cursor:default;
  }



  /* MAIN */

  div#main {
  padding:1em 0;
  }


  /* === FORMS === */

  form {
  position:relative;
  }

  form input[type="text"],
  form select {
  padding:0.3em 0.5em;
  width:100%;
  }

  form input[type="text"]:focus,
  form select:focus {
  }

  form div.input_left-wrapper {
  float:none;
  width:100%;
  margin:0 0 0.5em 0;
  }

  form div.input_right-wrapper {
  float:none;
  width:100%;
  margin:0 0 0.5em 0;
  }

  /* BUTTONS */

  button,
  a.button,
  input[type="submit"] {

  }

  .box button,
  .box input[type="submit"],
  .box a.button {
  clear:both;
  position:relative!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  float:none!important;
  width:100%!important;
  }


  /* TEXTBEDINGUNGEN UND -ANSCHNITT */

  .lines2,
  .lines4 {
  display:block;
  height:auto;
  overflow:visible;
  }

  div#footer ul.info {
  list-style:none;
  margin:2em auto -1em auto;
  }

  div#footer ul.info li {
  display:block;
  padding:0;
  border-right:none;
  border-bottom:1px solid #dcb6db;
  }

  div#footer ul.info li:last-child {
  border-bottom:none;
  }

  div#footer ul.info * {
  font-size:14px!important;
  line-height:32px!important;
  }

  div#footer ul.info li a {}

  div#footer ul.info li a:hover {}



} /* SMARTPHONES MQ END */

@media print {

  body { background:none transparent; color:#333; }
  #header h1 { padding:0; margin:0; }
  #main { width:100%; float:none; }
  #footer, #main_nav_wrapper { display:none; }

} /* PRINT MQ END */