html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, div, style {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(https://fonts.gstatic.com/s/inconsolata/v15/BjAYBlHtW3CJxDcjzrnZCLrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

html { min-height: 100%; font-size: 1.9vh;}
body { margin: 0  0; font-family: 'Inconsolata', monospace, arial; letter-spacing: 0.025rem; line-height: 1.3; box-sizing:border-box; width: 100%; height: 100%;  color: #666; overflow-x:hidden }

* {
    box-sizing: border-box;
    outline: medium none;
}



a { text-decoration: none; color: black}
.max_width { width: 100%; margin:auto;   }

.top_bottom_margin { margin: 6.25rem auto }

nav, footer { width: 100%; position: fixed; top: 0; height: 3.75rem; background: black; z-index: 10 }

footer { top:auto; bottom: 0}

nav > .max_width > a, nav > .max_width > div { float: right; text-align:center; text-transform:uppercase; background: #323232; color: #ddd; font-size: 1.1rem; min-width: 26.15%;  height: 3.75rem; line-height: 3.75rem; display:block; padding: 0 1rem;}

nav > .max_width > a:hover { text-decoration:underline;}

.active { text-decoration:underline; background: white !important; color: black !important }


input, textarea {
	-webkit-appearance: none;
	width: 100%;
	border-radius: 0;
	height: 1.88rem;
	line-height: 1.88rem;
	padding: 0 0.50rem;
	border: none;
	margin: 0.50rem 0
	}
	textarea { height: 3.75rem;  font-family: 'Raleway', sans-serif, arial; font-size: 0.8em; line-height: 1.5 !important; padding-top: 0.5em !important}
	
	input[type="submit"] { padding: 0; cursor:pointer; background: white}
script, style { display:none}
input[type="text"]:hover, input[type="text"]:focus, textarea:hover, textarea:focus { background-color: #FFFFCC }


#themen_wrapp {   height: 13.75rem; position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto}

.themen { width: 23.88%; top: 0; left: 0; right: 0; margin:auto; position:absolute; height: 100%; display:block }
.themen:first-child { right: auto;}
.themen:last-child { left: auto; }
.themen > div { position:absolute; height: calc(100% - 1.8rem); top: 0; left: 0; width: 100%; overflow:hidden; margin: -0.13rem; overflow:hidden}
.themen > h2 { position:absolute; bottom: 0;  left: 0; width: 100%;  text-align:right; padding: 0 0.19rem; font-size: 1.1rem }
.themen > div > div { float: left; width: 50%; height: 26%; background-size:cover; transition: all 0.4s; background-position: top center; border: solid 0.13rem white }
.themen  div:nth-child(3) { width: 100%; height: 48%; }


.themen:hover > div > div { filter: brightness(120%);}

.px_content { position:absolute; margin:auto; bottom: 1.5em; left: 1.5em; right: 1.5em; top: 1.5em;}

.px_content > div { position:absolute; height: 87%; background-size: cover; background-position:top center; top: 0; left: 0; width: 100%; z-index: 1}

.px_content > h3 { position:absolute; height: 10%; bottom: 0; left: 0; width: 100%; text-align:right; font-size: 0.8rem; z-index: 2}

.px_content:hover { transition: all 0.2s; }
.px_content:hover > div {  filter: sepia(90%);   }
.px_content:hover  > h3 { color: red; text-decoration:underline; }

.max_width:after, #punkte_wrapp:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
#themen_px_wrapp {overflow-x:hidden}
#themen_px_wrapp > div { margin: -1.5em; }
.themen_px { cursor: pointer;

    float: left;
    overflow: hidden;
    position: relative;
    transition: opacity 300ms linear 0s;
    width: 25%;
    z-index: 1; }

.themen_px::before {
    content: "";
    display: block;
    padding-top: 82%;
}

.lazy:before { background: #aaa; position:absolute; width: 100%; height: 100%; content: ""; transition: all 0.5s;}
.lazy_after:before { opacity: 0 !important}

#pic_wrapp_wrapp { position:fixed; z-index: 9; height: 100%; width: 100%; top: 0; left: 0; background: white}

#pic_wrapp { position:absolute; top: 0; left: 0; right: 0; bottom: 0; margin:auto; opacity: 0; transition: opacity 0.5s;}

.max_pic_wrapp { width: 100% !important; height: 100% !important}

#pic_wrapp img { position:absolute; width: 100%; height: 100%;  object-fit: cover; object-position: center center; z-index: 1; margin:auto; top: 0; left: 0; right: 0; bottom: 0;  }
#robbi_maennchen { height: 9.38rem; width: 4.81rem; background-image:url(bilder/robbi_maennchen.png); background-size:contain; background-repeat:no-repeat; background-position:left bottom; position:absolute;  bottom: 0; cursor:pointer}
#footer_text { position:absolute; height: 3.75rem; line-height: 3.75rem; font-size: 1.1rem; margin-left: 5.63rem; bottom: 0; color: white}
#ascrail2000 { z-index: 10 !important; margin-top: 0.31rem !important; position:fixed !important}

#photo_info { width: 21.25rem; height: 17.50rem; position:absolute; z-index: 8; margin-bottom: 8.13rem; margin-left: 5.63rem; bottom: 0; border-radius: 1.56rem 0.63rem 0.63rem 0; background: #333; border: solid 0.06rem #ccc; box-shadow: 0 0.13rem 0.38rem rgba(100, 100, 100, 0.5); line-height:normal; display: none }
#photo_info p { font-size: 0.74rem;
    line-height: 1.2 !important;
    margin-top: 0.38rem;}
#photo_info h4 { margin-top: 0.94rem; text-decoration:underline}
#photo_info_content { position:absolute; font-size: 0.8rem; top: 1.88rem; height: calc(100% - 3.13rem); padding: 0 1.88rem 0 1.25rem; color: white; left: 0; width: 100%; overflow-y: auto; -webkit-overflow-scrolling:touch; z-index: 3}
#photo_info_x { font-size: 1.1rem; position:absolute;  right: -1.06rem; top: -1.06rem; border-radius: 2.25rem; border-top: solid 0.06rem #ccc; border-right: solid 0.06rem #ccc; color: #fff; cursor: pointer; height: 2.25rem; width: 2.25rem; line-height: 2.25rem; background:#333; text-align:center; font-family: arial; font-weight:bold; z-index: 234}
#so_gehts_content { display:none}


#ios_leiste, #android_leiste { width: 80%; height: 6.25rem; background-position: center center; background-repeat:no-repeat; background-size: contain; background-image:url(bilder/webapp_ios.jpg); margin: 0.31rem 0 0 10%}
#android_leiste { background-image:url(bilder/webapp_android.jpg)}


#webapp_icon { width: 100%; height: 6.25rem; padding-left: 5.00rem; line-height: 6.25rem; color: white; font-weight: bold; background-image: url(bilder/webapp.png); background-size: 3.75rem 3.75rem; background-repeat:no-repeat; background-position:left center; font-size: 1.3em; cursor: pointer;  border-top:  dotted 0.13rem white; margin: 1.88rem 0 -0.63rem 0; display:none}
#webapp_icon:hover { color: #FFFFCC}

#pix_nav { position:absolute; top: 0; right: 0; bottom: 0; margin:auto; width: 2.13rem; z-index: 3; height: 13.13rem;  overflow:hidden;  }
#pix_nav div, #pix_nav a { height: 2.13rem; width: 2.13rem;  cursor: pointer; color: white;  font-family:arial; background-position:center center; background-size: 0.63rem 0.63rem; background-repeat: no-repeat;  display:block; background-color: rgba(50,50,50,0.8)  }

#pic_zaehler { color: black !important; background: rgba(255,255,255,0.7) !important; margin-top: 0.38rem}
#pic_zaehler p { width: 2.13rem; height: 1.06rem; line-height: 1.06rem; text-align:right; padding: 0 0.19rem; font-size: 0.75rem; margin: 0; letter-spacing: 0.13rem}
#pic_zaehler p:first-child { color: red; border-bottom: solid 0.06rem #333; line-height: 1.13rem; height: 1.13rem}



#max_pic { background-image:url(bilder/maximieren.png);   }

#ladebalken { width: 1.88rem; height: 1.88rem; background-image:url(bilder/ladebalken.gif); background-size:cover; top: 0; left: 0; right: 0; bottom: 0; margin:auto; z-index: 15; position:fixed; display:none}

.transform_reset { transform: scale(1,1) !important; transition: all 0s !important }

.max_pic_wrapp nav, .max_pic_wrapp footer { background: rgba(0,0,0,0.3)}
.max_pic_wrapp #pic_wrapp { width: 100% !important; height: 100% !important; }
.max_pic_wrapp #pic_wrapp img {  transform: scale(1.15,1.15); transition: transform ease-out 60s; }
.max_pic_wrapp #pic_wrapp_wrapp { background: black}

.max_pic_wrapp nav > .max_width > a, .max_pic_wrapp nav > .max_width > div { background: rgba(50,50,50,0.9); color: white}


.max_pic_wrapp #pic_zaehler { color: white !important; background: rgba(50,50,50,0.8) !important }
.max_pic_wrapp #pic_zaehler p:first-child { background: white !important; border-bottom: none !important; line-height: 1.06rem !important; height: 1.06rem !important }


.opacity nav { opacity: 0.7}


.max_pic_wrapp #max_pic { background-image:url(bilder/minimieren.png);   }
.next { background-image:url(bilder/next.png);   }
.prev { background-image:url(bilder/prev.png);   }
#slide_pic { background-image:url(bilder/play.png); position:relative }

#x_pic { background-image:url(bilder/x.png); }


.body_slide #slide_pic { background-image:url(bilder/play_active.gif); }
.relative { position:absolute; margin: auto; height: 100%; top: 0; left: 0; right: 0; bottom: 0}

#footer_nav { float:right; text-align:right; height: 3.75rem; line-height:3.75rem; padding-right: 1.25rem}
#footer_nav a { font-size: 0.69rem; color: #efefef; text-transform:uppercase}

.texter { padding: 5.63rem 11.88rem 5.63rem 16.88rem; font-size: 0.9rem}
.texter p { margin-bottom: 0.63rem}
.texter a { margin: 0.31rem 0; font-weight:bold; display:block}
.texter h2, .texter h3 { text-decoration:underline; margin-bottom: 0.63rem; margin-top: 1.88rem}

#fehler { position:fixed; text-align:center; top: 0; bottom: 0; margin:auto; width: 100%; height: 1.88rem}

#besser_landscape { width: 6.88rem; height: 4.56rem; background-image:url(bilder/besser_landscape.gif); background-size:contain; background-repeat:no-repeat; background-position:center center; background-color: rgba(100,100,100,0.65); border: solid 0.06rem red; opacity: 1;  position:fixed; top: 0; left: 0; right: 0; bottom: 0; margin:auto; z-index: 23; transition: all 0s; display: none; border-radius: 0.63rem }

.besser_landscape_gesehen { opacity: 0 !important; transition: all 4s 4s !important; }

#desc_wrapp {  z-index: 10; top: 0; left: 0; position:absolute; width: 100%  }
#pic_desc_button { width: 2.13rem; height: 2.13rem; background-color: rgba(50, 50, 50, 0.6); color: white; text-align:center; line-height: 2.13rem; font-size: 1.5rem; cursor: pointer; position:absolute; top: 0; left: 0;  }
.max_pic_wrapp #desc_wrapp  { top: 5.63rem; left: 2.13rem  }
.pic_desc #pic_desc { display: inline-block !important}
.pic_desc #pic_desc_button { background-color: rgba(0, 0, 0, 0.5);  color:white}

#pic_desc { margin-top: 2.13rem; margin-left: 0; font-size: 0.95rem; display:none;  background-color: rgba(0, 0, 0, 0.6); max-width: 50%; padding: 0.44rem; color: white}


@media screen and (min-aspect-ratio: 90/100) { 

.themen:first-child { right: auto; left: 6%}
.themen:last-child { left: auto; right: 6%}
#themen_px_wrapp > div { margin: 1.5em; }

#pix_nav { right: 1.88rem}


 #footer_nav { padding-right: 0 }
 nav > .max_width > a { width: 23.94%; }
.themen:first-child { right: auto; left: 0}
.themen:last-child { left: auto; right: 0}
.max_width { width: 135vh }
#themen_wrapp { border: none}
.opacity #footer_nav  { display:none}
.max_pic_wrapp #desc_wrapp  { top: 6.25rem; left: 5.00rem  }
#pix_nav { right: 0.00rem}

 }

 @media screen and (max-aspect-ratio: 130/100) { 
html { font-size: 1.6vw;}
.max_width { width: 100% }
#pix_nav { right: 1rem;}
 }
 

@media screen and (max-aspect-ratio: 90/100) { 
    html { font-size: 3.7vw;}
#pic_wrapp_wrapp { background: black}
#desc_wrapp  { top: 5.63rem !important; left: 0.63rem !important  }
#pic_desc {  max-width: 35%; font-size: 0.9rem}
nav > .max_width > a, nav > .max_width > div { width: 33.3332%; }
.active { background-color: rgba(255,255,255,0.4) }
#pic_wrapp { width: 100% !important; height: 100% !important}
#max_pic, .prev { display:none !important}
#pix_nav { height: 10.38rem; right: 0.63rem}
#slide_pic, #x_pic { margin-bottom: 0.63rem} 
#pic_zaehler { color: white !important; background: rgba(50,50,50,0.8) !important; margin-top: 0.63rem }
#pic_zaehler p:first-child { background: white !important; border-bottom: none !important; line-height: 1.06rem !important; height: 1.06rem !important }
#pic_zaehler p { height: 1.06rem; line-height: 1.06rem}
#pic_wrapp img {  transform: scale(1.1,1.1); transition: transform ease-out 40s; }


.pic_active nav > .max_width > a, nav > .max_width > div { background: rgba(30,30,30,0.5)}
.pic_active nav { background-color: transparent}
.pic_active .active { background-color: transparent !important; color: white !important; text-shadow: 0.06rem 0.06rem 0.06rem #000;}

.texter { padding: 2.50rem 7.94rem; font-size: 0.7rem}
#themen_wrapp {  border-left: solid 1.75rem white; position:fixed;  border-right: solid 1.56rem white}
.themen > h2 { font-size: 1.3rem }
#main_load { min-height: 150vh}
.themen_px { width: 33.333333332%}
.themen > div { margin: 0; height: calc(100% - 1rem) }
#themen_px_wrapp > div { border: solid 2.25em white; margin: 0}
.px_content { left: 0.75em; right: 0.75em; bottom: 0.75em; top: 0.75em}
.top_bottom_margin { margin: 3.00rem 0}
.pic_active footer { background-color: rgba(0,0,0,0.4)}
.pic_active nav { background-color: transparent }
nav > .max_width > a, nav > .max_width > div { width: 50%; overflow: hidden;}
.pic_active #cat_link { display: none;}
.pic_active #besser_landscape { display: block}
#footer_text { height: 4.7rem; margin-left: 5.2rem;}

#themen_wrapp { position: static; margin-top: 5rem; margin-bottom: 10rem;}

.themen { position: relative; width: 68%; height: 55vw; margin-bottom: 2rem;}
.themen > div > div { height: calc(50% - .5rem) !important;}
.themen > div > div:nth-child(4), .themen > div > div:nth-child(5) { display: none;}

#photo_info_x { top: 0; right: 0; border: none;}
#photo_info p { font-size: .9rem;}
.themen_px { width: 50%;}
.texter { font-size: 1rem; padding: 4rem 3rem;}
.px_content > h3 { font-size: .9rem;}

 }