article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0; margin:0;}
html {-webkit-text-size-adjust:100%;}
hr {clear:both; display:block; width:100%; border:none; height:1px; position:relative; left:-9999em;}
a:focus, a:hover, a:active {text-decoration: none;}
h1, h2, h3 {font-weight:normal; margin:0;}
ul, ol {list-style:none;}


/* Einfache Flexboxdefinition zu gleichen Höhe */
.flexo {
  width:100%;
  display: -ms-flexbox; display: -webkit-flex; display: flex;
 -webkit-flex-direction: columns; -ms-flex-direction: columns; flex-direction: columns;

 -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;

 -webkit-align-content: stretch;  -ms-flex-line-pack: stretch; align-content: stretch;
 -webkit-align-items: stretch;  -ms-flex-align: stretch; align-items: stretch;
 -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}

body          {margin:0;}
#wrapper      {padding:0; margin-top:0;width:90%; max-width:1300px;}
#content      {padding:50px; background:#FFF;}

.section-title    {margin:0 0 20px 0; padding-bottom:10px; border-bottom:2px solid #BFBFBF;}
.more a           {text-decoration:none; color:#444;}
.more span        {font-size:28px;}
.section-title h2 {font-size:28px;}

.slot-slider  {margin-bottom:60px; width:100%;}
.slot-slider .flexo {min-height:250px;}
.bild         {width:66%; position:relative; overflow:hidden; background-repeat:no-repeat; background-size:cover;}
.bild         {padding-top:28%; }/* Wert hängt vom Sitenverhältnis des Bildes ab */

.summary      {width:34%;}
.summary      {background:#F5F5F5; padding:25px;}
.summary h3   {margin:0 0 10px 0; font-size:20px;}
.summary p    {margin:0 0 10px 0;}

.summary      {position:relative; padding-bottom:80px;}
.summary .button {position:absolute; bottom:20px; display:inline-block; border:1px solid #BFBFBF; color:#444; text-decoration:none; padding:10px 25px; font-size:1.0em; text-transform:uppercase;}
.button.action   {background-color:#B1AC98; color:#FFF;}

@media only screen and (max-width: 860px) {
.bild         {width:50%;}
.summary         {width:50%;}

.summary h3   {font-size:16px;}
.summary p    {font-size:14px;}
}
@media only screen and (max-width: 768px) {
.more span, .section-title h2 {font-size:20px;}

.bild, .summary {width:100%;}
.summary {padding-bottom:100px;}
.summary .button {bottom:50px;}
}

@media only screen and (max-width: 500px) {
#wrapper      {width:100%;}
#content      {padding:10px;}
.slot-slider .flexo {}
.more span, .section-title h2 {font-size:17px;}
.bild         {padding-top:50%; }
.summary      {padding-left:3%; padding-right:3%; padding-bottom:90px; background-color:#EEE;}
.summary .button {left:3%; right:3%; text-align:center; padding:7px; font-weight:bold;}
}