/* nophoto.de – statischer Nachbau des Koken-Themes "Axis 2" */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/open-sans-latin-variable.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/open-sans-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#707070;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.25em;line-height:1.5;text-align:center;-webkit-font-smoothing:subpixel-antialiased}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,hr,nav,header,img{margin:0 0 1.5rem}
ul,ol{padding:0;list-style:none}
img{vertical-align:baseline;border:0}
a,a:link,a:visited,a:active{color:#707070;text-decoration:none;transition:color .2s ease-in-out}
a:hover{color:#000}
h1,h2,h3,h4,h5,h6{color:#000;letter-spacing:2px;text-transform:uppercase;font-weight:700}
h1 a,h2 a,h3 a,h4 a{color:inherit!important}
h1{font-size:1.6rem;line-height:1.625}
h2{font-size:1.5rem;line-height:1.73}
h4{font-size:.95rem;line-height:1.5rem;letter-spacing:1px}
hr{clear:both;padding:0;height:1px;border:0;background:transparent;border-bottom:1px solid #ccc}
b,strong{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout */
#container{width:1004px;margin:0 auto;padding-top:2rem;position:relative;z-index:50}
header.top{margin-bottom:0}
.site_title_block{margin-bottom:1rem}
.site_title{font-family:Montserrat,sans-serif;font-size:1.7rem;font-weight:400;letter-spacing:2px;text-transform:uppercase;margin:0;line-height:1.625}
.site_title a{color:#000!important}
nav{position:relative}
nav ul{margin:0;padding:0}
nav li{display:inline-block;white-space:nowrap;padding:0 6px}
nav a,nav a:link,nav a:visited{font-size:1.1rem;letter-spacing:1.5px;text-transform:uppercase;color:#707070}
nav a:hover,nav a.current{color:#000}
nav#main{margin-bottom:1.85rem}
main{display:block;margin-top:1.7em}
footer.bot{display:block;font-size:1rem;padding:1.5em 0;clear:both}
header.page{margin-bottom:3rem}

/* Back to top */
#backtop{position:fixed;right:20px;bottom:20px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#000;opacity:0;pointer-events:none;transition:opacity .3s}
#backtop.show{opacity:1;pointer-events:auto}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Grids */
.grid{display:flex;gap:15px;align-items:flex-start;margin-bottom:3rem}
.grid .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:15px}
.grid.nojs{display:grid;grid-template-columns:repeat(4,1fr)}
.grid figure{margin:0;position:relative}
.grid a.figimg{display:block;position:relative;background:#f4f4f4}
.grid img{display:block;width:100%;height:auto;margin:0;opacity:0;transition:opacity .4s}
.grid img.loaded{opacity:1}
.grid.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:0 15px}
.grid.albums figcaption h2{font-size:95%;margin:1.5rem auto}
.grid.albums a.figimg{aspect-ratio:1/1}
.grid.albums.kunden a.figimg{cursor:default}

/* Slideshow (Startseite) */
.slideshow{position:relative;margin:0 auto 1.5rem;height:calc(100vh - 176px);min-height:320px;cursor:pointer;user-select:none}
.slideshow .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 1.25s ease-in-out}
.slideshow .slide.on{opacity:1}
.slideshow img{max-width:100%;max-height:100%;width:auto;height:auto;margin:0}
.slideshow .timer{position:absolute;left:50%;bottom:14px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#aaa;opacity:.85;z-index:2;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Einzelbild-Seite */
ul.nav_content{margin:0 0 3rem;padding:0;display:flex;justify-content:center;gap:0}
ul.nav_content li{display:inline-block;padding:0 8px}
ul.nav_content li:first-child,ul.nav_content li:last-child{flex:0 0 auto}
.pag,a.pag{text-transform:uppercase;letter-spacing:1px;font-size:11px}
.pag.disabled{color:#bbb}
.larr:before{content:"\2190  "}
.rarr:after{content:"  \2192"}
.content-figure{margin:0 0 1.5rem}
.content-figure .img_wrap{line-height:0}
.content-figure img{max-width:100%;width:auto;height:auto;max-height:calc(100vh - 200px);margin:0 auto;cursor:zoom-in}
.text-content{width:65%;margin:0 auto}
.text-content h1{margin:1.5rem auto}
.text-content .caption{font-style:italic;margin-bottom:1.5rem}
.meta{font-size:1.1rem}
.nob{margin-bottom:0!important}

/* Textseiten */
article.page{text-align:left;width:75%;margin:0 auto 4.5rem}
article.page a,article.page a:link,article.page a:visited{text-decoration:underline}
article.page a:hover{color:#000}
article.page.center{text-align:center}
article.page{padding-top:1rem}
article.page h3{font-size:1.25rem;letter-spacing:0;text-transform:none;color:#707070;margin:3rem 0 1.5rem}
article.page h3:first-child{margin-top:0}

/* Kontaktformular */
.form-wrap{width:75%;margin:0 auto}
.k-contact-form{width:70%;margin:0 auto 3rem}
.form-msg:empty{display:none}
article.page.about{padding-top:5.6rem}
.k-contact-form fieldset{border:0;margin:0 0 2em;padding:0}
.k-contact-form label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:400;color:#000;margin:0 0 .5em}
.k-contact-form .req label:after{content:"*";color:red;margin-left:3px}
.k-contact-form input,.k-contact-form textarea{width:100%;color:#000;font-size:13px;font-family:inherit;padding:.5em;margin:0;background:transparent;outline:none;border:1px solid rgba(0,0,0,.15);border-radius:0;transition:border-color .2s}
.k-contact-form input{text-align:center}
.k-contact-form input:focus,.k-contact-form textarea:focus{border-color:rgba(0,0,0,.4)}
.k-contact-form .error label{color:red}
.k-contact-form .error input,.k-contact-form .error textarea{border-color:red}
.k-contact-form .hp{position:absolute;left:-9999px}
button,.button{font-family:inherit;font-size:11px;letter-spacing:1px;text-transform:uppercase;display:inline-block;padding:1em 2em;margin:0;background:transparent;border:1px solid rgba(0,0,0,.3);color:#000;cursor:pointer;border-radius:0}
button:hover{border-color:rgba(0,0,0,.6)}
button:disabled{color:#707070;border-color:rgba(0,0,0,.15)}
.k-contact-form .note{font-size:1rem;margin-top:1.5em}
.form-msg{padding:1em 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#000}
.form-msg.ok:before{content:"\2714";margin-right:6px}
.form-msg.err{color:red}

/* Lightbox */
#lb{position:fixed;inset:0;background:#fff;z-index:1000;display:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;color:#000}
#lb.open{display:block}
#lb .stage{position:absolute;inset:56px 70px 90px}
#lb .track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#lb .track::-webkit-scrollbar{display:none}
#lb .slide{flex:0 0 100%;width:100%;height:100%;box-sizing:border-box;padding:0 18px;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
#lb .slide img{max-width:100%;max-height:100%;width:auto;height:auto;margin:0;opacity:0;transition:opacity .3s;-webkit-user-select:none;user-select:none}
#lb .slide img.loaded{opacity:1}
#lb button{border:0;padding:8px;background:none;color:#000;position:absolute;line-height:0}
#lb .icon{width:22px;height:22px}
#lb .icon.fill{fill:currentColor;stroke:none}
#lb .play{top:12px;left:12px}
#lb .fs{top:12px;right:52px}
#lb .close{top:12px;right:12px}
#lb .prev,#lb .next{top:50%;margin-top:-20px}
#lb .prev{left:14px}
#lb .next{right:14px}
#lb .prev[hidden],#lb .next[hidden]{display:none}
#lb .bar{position:absolute;left:60px;right:60px;bottom:12px;height:66px;padding:0;text-align:center;line-height:1.5;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}
#lb .slot{height:3em;margin-top:3px;max-width:100%;display:flex;justify-content:center;align-items:flex-start}
#lb.nocap .slot{visibility:hidden}
#lb .bar a{color:#000}
#lb .bar .sep{color:#999;margin:0 6px}
#lb .bar .count{color:#777}
#lb .bar .togglecap{margin:0;cursor:pointer;background:none;border:0;position:static;padding:0;font:inherit;letter-spacing:0;text-transform:none;line-height:inherit}
#lb .cap{display:none;cursor:pointer;color:#555;max-width:100%;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#lb.showcap .cap{display:-webkit-box}
#lb.showcap .togglecap{display:none}
#lb .spinner{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:2px solid #ddd;border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite;display:none}
#lb.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
html.lb-open{overflow:hidden}

/* Mobile Navigation */
#mob_nav{display:none}
@media only screen and (max-width:1023px){#container{width:960px}}
@media only screen and (min-width:768px) and (max-width:959px){#container{width:728px}}
@media only screen and (max-width:767px){
  body{font-size:1.2em}
  .site_title{font-size:calc(1.7rem * .85)}
  #container{width:100%;padding-left:20px;padding-right:20px;margin-top:48px}
  nav#main,#backtop{display:none}
  #mob_nav{display:block;position:fixed;top:0;left:0;width:100%;background:#fff;z-index:100;transition:background .3s}
  #mob_nav .bar{height:48px;position:relative}
  #mt{position:absolute;left:50%;top:0;width:44px;height:48px;margin-left:-22px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
  #mt span,#mt span:before,#mt span:after{display:block;width:19px;height:3px;background:#000;position:relative;transition:transform .2s,background .2s}
  #mt span:before,#mt span:after{content:"";position:absolute;left:0}
  #mt span:before{top:-6px}
  #mt span:after{top:6px}
  html.mob-open #mt span{background:transparent}
  html.mob-open #mt span:before{top:0;transform:rotate(45deg)}
  html.mob-open #mt span:after{top:0;transform:rotate(-45deg)}
  .mob_pag{position:absolute;top:0;height:48px;width:40px;display:flex;align-items:center;justify-content:center;color:#000!important}
  .mob_pag .icon{width:20px;height:20px;stroke-width:2.4}
  #mob_up{left:6px;opacity:0;pointer-events:none;transition:opacity .3s}
  #mob_up.show{opacity:1;pointer-events:auto}
  #mob_down{right:6px}
  .mob_nav_content{display:none;padding:1em 0 2em}
  html.mob-open #mob_nav{background:#f0f0f0}
  html.mob-open .mob_nav_content{display:block}
  .mob_nav_content li{display:block;padding:0}
  .mob_nav_content li a{display:block;padding:.5em 0}
  .grid.albums{grid-template-columns:repeat(2,1fr)}
  .text-content,article.page,.k-contact-form,.form-wrap{width:100%}
  article.page.about{padding-top:1rem}
  .slideshow{height:auto;min-height:0;transition:height .6s}
  .slideshow .slide{align-items:flex-start}
  .slideshow img{max-height:none;width:100%}
  .content-figure img{max-height:none}
  #lb .stage{inset:56px 0 90px}
  #lb .slide{padding:0 18px}
  #lb .prev,#lb .next{top:auto;bottom:40px;margin:0}
  #lb .fs{display:none}
}
@media (hover:none){#lb .fs{display:none}}

/* Handy quer */
@media only screen and (max-width:767px) and (orientation:landscape){
  .grid.albums{grid-template-columns:repeat(3,1fr)}
}
@media only screen and (max-height:500px) and (orientation:landscape){
  #lb .stage{inset:6px 56px 46px}
  #lb .bar{bottom:4px;height:40px;left:56px;right:56px;flex-direction:row;justify-content:center;align-items:flex-start;gap:16px}
  #lb .slot{height:auto;margin:0;max-width:70%}
  #lb .cap{-webkit-line-clamp:2}
  #lb .prev,#lb .next{top:50%;bottom:auto;margin-top:-20px}
}