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(bilder/Inconsolata-VariableFont.woff2) format('woff2');
}

html { min-height: 100%; font-size: 2.1vh;}
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;   height: 3.75rem; line-height: 3.75rem; display:block; padding: 0 1rem; min-width: 25%;}



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

#full_pic, #top_pic  { display: none;}


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.8rem; line-height: 1.5 !important; padding-top: 0.5rem !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: 25%; 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: calc(100% + .26rem); 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 > img { float: left; width: 50%; height: 26%;  transition: all 0.4s; object-fit: cover; border: solid 0.13rem white; opacity: .1; background-color: #aaa; }
.themen > div > img.fade_me { opacity: 1;}
.themen  div > img:nth-child(3) { width: 100%; height: 48%; }


.px_content { padding: 0 1.5rem 2rem 1.5rem ;}
.px_content > img { object-fit: cover; width: 100%; height: 8rem; opacity: .1; background-color: #aaa; transition: opacity 0.4s;}
@supports (aspect-ratio: 1) {
  .px_content > img { height: auto; aspect-ratio: 16 / 11; }
}
.px_content > img.fade_me { opacity: 1;}

.px_content > h3 { height: 1.3rem; line-height: 1.3rem; text-align:right; font-size: 1rem; z-index: 2; white-space: nowrap; overflow: hidden;}


.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: .75rem -1.47rem; }
.themen_px { cursor: pointer;

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



#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; height: 65vh;}

.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; cursor: pointer;  }
#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; cursor: pointer;}
#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}


#pix_nav { position:absolute; top: 0; right: 0; bottom: 0; margin:auto; height: fit-content; z-index: 4;   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: 25%; 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; width: 100%;}
#pic_zaehler p { width: 100%; 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);   }
#max_pic_mob { display: none !important;}

#ladebalken { width: 1.3rem; height: 1.3rem; 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.8rem; 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}


#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}
p-p { display: none;}

@media screen and (min-aspect-ratio: 130/100)  { 
nav > .max_width > a:hover { text-decoration:underline;}
.px_content:hover { transition: all 0.2s; }
.px_content:hover > div {  filter: sepia(90%);   }
.px_content:hover  > h3 { color: red; text-decoration:underline; }
.themen:hover > div > div { filter: brightness(120%);}
}

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

.themen:first-child { right: auto; left: 6%}
.themen:last-child { left: auto; right: 6%}

#pix_nav { right: 1.88rem}



 nav > .max_width > a { width: 25%; }
.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: 5rem  }
#pix_nav { right: 0rem}
body:not(.max_pic_wrapp) #pic_wrapp { max-width: 120vh;}
 #footer_nav { padding-right: 0 }
 }

 @media screen and (max-aspect-ratio: 140/100)  { 
html { font-size: 1.6vw;}
.max_width { width: 100% }
#pix_nav { right: 1rem;}
#themen_px_wrapp > div { margin: 0 1rem; }
.px_content { bottom: 1rem; left: 1rem; right: 1rem; top:  1rem;}
#pic_wrapp {  width: 100% !important;}
.themen:first-child { left: 2rem;}
.themen:last-child { right: 2rem;}
 #footer_nav { padding-right: 2.6rem }
 }
  @media screen and (max-aspect-ratio: 110/100)  { 
    html { font-size: 2vw;}
.themen_px { width: 33.333332%;}
  }
 

@media screen and (max-aspect-ratio: 68/100) and (max-width: 700px) { 
    html { font-size: 3.7vw;}
#pic_wrapp_wrapp { background: black}
#desc_wrapp  { top: auto !important; bottom: 2.58rem !important; left: 0 !important  }
#pic_desc {  max-width: 70%; font-size: 1.1rem; padding: .6rem .6rem .6rem .8rem; position: absolute; left: 0; top: 2.58rem; margin-top: 0; }
#pic_desc_button { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1.7rem; position: absolute; bottom: 0; left: 0;}
.pic_desc #pic_desc_button { color: greenyellow;}
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; background-color: #222; bottom: auto; top: 3.75rem;}
body:not(.mob_min_pic) #pic_wrapp { height: calc(50vh - 3.75rem) !important; max-height: 100vw; min-height: 78vw; }
 #pic_wrapp picture:first-of-type img { height: 100%; bottom: auto; top: 0; border-bottom: solid .08rem #efefef;} 
#full_pic, #top_pic { display: block; }
#full_pic img, #top_pic img  {  height: calc(100vh - 50vw); z-index: 0; filter: blur(1.2rem) contrast(2.5) saturate(.1); transform: scaleX(-1); opacity: .4; top: 60vw; width: calc(100% + 2rem); left: -1rem; right: auto; position: fixed; bottom: auto; }
#top_pic img { top: calc(-50vh - 3rem); transform: scale(1, -1); height: calc(50vh + 5rem); position: absolute; filter: blur(.7rem); opacity: .8;}
#max_pic, .prev, #slide_pic { display:none !important}
#max_pic_mob { background-image: url(bilder/minimieren.png); display: block !important;}
.mob_min_pic #max_pic_mob { background-image: url(bilder/maximieren.png); }
#pix_nav {  right: 2.7rem; top: auto; bottom: 2.7rem;}
#pix_nav div, #pix_nav a { height: 2.8rem; width: 2.8rem; background-color: rgba(50,50,50,1);}
#pic_zaehler p { height: 1.8rem; line-height: 1.8rem; font-size: .9rem;}

#slide_pic, #x_pic, #max_pic_mob { margin-bottom: 0.63rem} 
#pic_zaehler { color: white !important; background: rgba(50,50,50,0.8) !important; margin-top: 0.63rem; height: 3.4rem !important; }
#pic_zaehler p:first-child { background: white !important; border-bottom: none !important; line-height: 1.6rem; height: 1.6rem; font-size: .9rem; font-weight: bold;  }

.pic_active nav { background-color: transparent}

.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 .5rem white; margin: 2.5rem 0 0 0}
.px_content {  padding: 0 .75rem 1.5rem .75rem}
.top_bottom_margin { margin: 3rem 0 8rem 0}
.pic_active footer { display: none;}
.pic_active nav { background-color: transparent }
nav > .max_width > a, nav > .max_width > div { width: 50%; overflow: hidden; background-color: transparent;}
.pic_active a:first-of-type { display: none;}
#footer_text {  margin-left: 5.2rem; font-size: 1.2rem;}
#footer_nav { line-height: 3.6rem; padding-right: 1.3rem;} 
#footer_text span { display: none;}


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

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

#photo_info { margin-bottom: 5rem; height: 30rem; margin-left: auto; margin-right: auto; left: 0; right: 0; z-index: 0; width: calc(100% - 4rem); display: none;}
#photo_info_content { padding: 0 2.5rem 4rem 2.5rem; top: 2.5rem; height: calc(100% - 5rem);}
#photo_info_x { top: .5rem; right: .5rem; border: none; background-color: black; border-radius: .2rem; height: 2.5rem; line-height: 2.5rem; width: 2.5rem;}
#photo_info p { font-size: 1.1rem; line-height: 1.52 !important; margin-bottom: .25rem;}
.themen_px { width: 50%;}
.texter { font-size: 1.1rem; padding: 4rem 3rem 15rem 3rem; line-height: 1.5;}



#robbi_maennchen { height: 12rem; width: 8rem; left: -1rem;}
.pic_active #footer_text, .pic_active  #robbi_maennchen  { display: none;}
p-p { position: absolute; font-size: .6rem; color: #efefef; height: 1.2rem; padding: 0 .35rem 0 1.5rem; border-radius: .5rem 0 0 0; background-color: #111; display: flex; z-index: 3; bottom: .08rem; right: 0; align-items: center; background-image: url(bilder/copyright.svg); background-repeat: no-repeat; background-size: auto 70%; background-position: left .35rem center;}
.mob_min_pic p-p  { display: none;}
#ladebalken { width: 1.88rem; height: 1.88rem;}


.themen:first-child { left: 0;}
.themen:last-child { right: 0;}

@media screen and (min-aspect-ratio: 60/100) { 
#pix_nav div, #pix_nav a { height: 2.8rem; width: 2.8rem; margin-bottom: 0; margin-top: 0; }
#pix_nav { bottom: 1.5rem; right: 1.5rem;}
}


 }