/* *:hover { outline: 1px dashed red; } */

/* *, *:before, *:after { - wird vererbt... also reicht: */
html, * {
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}

html { height: 100%; width: 100%; }
body {
 height: 100%; width: 100%;
 background: #fff;
 overflow-x: hidden;
}

.resp-home { 
  display: none;
  position: absolute;
  left: 20px; top: 5px;
  z-index: 1000000;
}
.resp-home img { height: 40px; width: auto; }
 
/* der Rahmen */
.ym-wrapper { /* Pos.+Groesse wieder herrichten */
  max-width: auto;
  min-height: 100%;
  margin: 0 auto;
  padding: 0px;
  background-color: #fff;
}

header.main {
  background-color: rgba(82,93,97,0.8);
  margin: 0px 0 2em 0;
  margin: 0;
  padding: 0px;
  display: flex;
  border-bottom: 2px solid white;
}
header.main .head_logo { flex: 20; }
header.main .head_logo img { max-width: 225px; width: auto; height: auto; margin: 15px 15px 15px 15px; vertical-align: bottom; } /* vert-align: wegen Pixel unter dem Bild */
header.main .head_logo a {  }
header.main .head_logo a:hover {  }
header.main .head_addr {
  font: 13px/21px Trebuchet MS, Arial, Helvetica, Sans Serif;
  color: white;
  padding: 2em 0;
  flex: 18;
  white-space: nowrap;
}
header.main .head_addr a {
  color: rgb(250, 215, 22);
}
header.main .head_addr a:hover {
  color: black;
}
.head_soc {
  position: absolute;
  right: 21px;
  top: 21px;
  width: auto;
  height: auto;
  z-index: 11;
}
.head_soc img {
  width: 42px;
  height: 42px;
  max-width: 42px;
  max-height: 42px;
}
header.main nav { flex: 62; z-index: 10; }

/* ***** BUTTONS STARTSEITE ***** */

/* Allgemeines Layout */
div.button {
  position: absolute;
  width: 10em;
  height: auto;
  font-size: 100%;
  text-align: center;
  margin-top: 1em;
  padding: 0.2em;
  z-index: 100;
  display: inline;
  border: solid 3px #ffffff;
  -moz-border-radius:6px; /* Firefox */
  -webkit-border-radius:6px; /* Chrome, Safari */
  -khtml-border-radius:6px; /* Konqueror */
  border-radius:6px; /* CSS3 */
  behavior:url(border-radius.htc); /* Internet Explorer */
}
div.button1 {
  margin-top: 33vw;
  margin-left: 4vw;
}
div.button2 {
  margin-top: 37vw;
  margin-left: 4vw;
}
div.button a {
  text-decoration: none;
  color: #ffffff;
}
div.button a:hover {
  color: #000000;
}
div.button:hover{
  background: rgba(255,255,255,0.4);
}
/* Absatz zwischen Header und Slider deaktivieren */
#c94 p,#c95 p, #c96 p {
  display: none;
}

/* Button runterscrollen */
#c96 + div,
#c96 + header + div {
  width: 0; height: 0;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 50%;
}

/* die Spalten */
/* Wichtig: WAK BE-Layouts */
/* body.belay-1: Startseite: 1 oben, 2 Inhalt, 1 unten
   body.belay-2: 1-Spalten Layout: 1 Inhalt, 1 unten
   body.belay-3: 2-Spalten Layout: 2 Inhalt, 1 unten
*/
.ym-column { margin: 2em 0 30px 4px; }
.ym-column > div { padding: 0 10px; }

.ym-col1 { width: 20%; } /* left column */
.ym-col2 { width: 40% } /* right column */
.ym-col3 /* center column */
{
  min-height: 100px;
  margin: 0 40% 0 20%;
  padding: 0;
  border-left: 1px #ccc solid;
  border-right: 1px #ccc solid;
}
.ym-cbox { padding: 0; }

/* 1-Spalten */
body.belay-2 .ym-col2 { width: 0%; display: none; }
body.belay-2 .ym-col3 { 
  max-width: 1144px;
  margin-right: 2%;
  border-right: none; 
}

.ym-col2 .col2-opener { 
  display: none;
  text-align: center;
  background-color: lightgrey;
  margin: 1em 0;
  font-weight: bold;
}

/*** FOOTER ***/
footer.main {
  background-color: rgba(82,93,97,0.8);
  border-radius: 6px;
  margin: 0; padding: 0;
  display: flex;
}
footer.main .foot_info {
  font: 18px/26px Trebuchet MS, Arial, Helvetica, Sans Serif;
  margin: 10px auto;
  color: #fff;
  text-align: center;
}
footer.main .foot_info a { color: rgb(250, 215, 22); }
footer.main .foot_info a:hover {color: black; }

/* innov8 */
.innov8 { font-size: 75%; }

header.main a,
header.main a:hover,
footer.main a,
footer.main a:hover 
{ text-decoration: none; }

div.button-aus-an { text-align: right; }
button.aus-an {
 padding: 5px; 
 border-radius: 8px;
 background-color: rgba(255,215,25, 0.5);
 border: solid 1px rgba(255,215,25, 0.5);
 cursor: pointer;
 width: 28px;
 position: absolute;
 right: 0;
 top: -30px;
}


/* links Spalte */
.ym-col1 h1.page {
  font: 120%/1.5em Helvetica, Arial, Sans Serif;
  color: rgb(82, 93, 97);
  margin: 0 15px 0 0;
  text-align: right;
  font-weight: bold;
}


/* Bilder */
img { border: none; }

figure.image { margin-bottom: 0; }

/* Inhalt */
p.csc-header-date { text-align: right; }

.flexslider .slides img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/***** Google maps iframe responsive */
.responsive-frame iframe {
  width: 100%;
}
.responsive-frame {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 75%;
  height: auto;
}
.responsive-frame iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.responsive-frame.ratio4x3 {
  padding-bottom: 75%;
}


div.print.title { display: none; }

@media print {
  html { height: auto; }
  header.main, footer.main, .ym-col1 { display: none;}
  html, home, .ym-wrapper, .ym-column,.ym-col3 { width: 100%; margin: 0; padding: 0;}
  div.button-aus-an { display: none; }
  button.aus-an { display: none; }
  .ym-col3 { border: none; margin: 0; }

  div.print.title { display: block !important; margin-bottom: 2em; font: 16px/1.5 Helvetica, Arial, Sans Serif; }
}


/*
body#id-1 div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 0; }


header.main, footer.main { position: relative; }
header.main { z-index: 10; background: rgba(82,93,97,0.7); }
footer.main { z-index: 3; }

body#id-1 .ym-wrapper > div { z-index: 5; position: relative; top: -120px } 
*/



/*
body > * { outline: 1px solid #f00; }
body > * > * { outline: 1px solid #fc0; }
body > * > * > * { outline: 1px solid #ff0; }
body > * > * > * > * { outline: 1px solid #cf0; }
body > * > * > * > * > * { outline: 1px solid #0f0; }
body > * > * > * > * > * > * { outline: 1px solid #0fc; }
body > * > * > * > * > * > * > * { outline: 1px solid #0ff; }

body *:hover { outline-width: 1px; outline-color: #00f; outline-style: dotted; }
/* */