/* cmsms stylesheet: global modified: Mittwoch, 15. April 2026 11:25:26 */
body, html {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-size: 0.78em;
font-weight: 400;
color: #000000;
line-height: 1.35em;
letter-spacing: 1px;
height: 100%;
width: 100%;
min-width: 320px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
background: #000000;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
hyphens: none;
}

.pt-serif-regular {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
}


.playfair-display-400 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

img { border: 0px; text-decoration: none; border-style: none; border-width: 0; }
a { outline: 0; -moz-outline: 0 }
b, strong { font-weight: 600; }
i, em { font-style: italic; }
form { margin: 0px; padding: 0px; position: relative; }
p { margin: 0px; padding: 0px; }
ul { margin: 0px; padding: 0px; }
li { margin-left: 15px; }
.wh100 { width: 100%; height: auto; }
.pointer { cursor: pointer; }
.jk-abstand { height: 10px; }

* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.ofh {
overflow: hidden;
}

.block {
display: block;
}

.cb {
clear: both;
}

.fl {
float: left;
}

.fr {
float: right;
}


#wrapper {
width: 100%;
max-width: 855px;
padding: 0px;
margin: 0px auto;
}

#content {
width: 100%;
height: auto;
min-height: 100vh;
padding: 28px 30px 16px 30px;
background: #ffffff;
}

#menu {
position: relative;
width: 100%;
max-width: 585px;
height: auto;
padding: 0px 0px 27px 0px;
font-family: "PT Serif", serif;
transition: all 200ms ease 10ms;
}

#menu a {
white-space: nowrap;
}

#about {
width: 100%;
max-width: 520px;
}

#info {
float: left;
width: 240px;
height: auto;
padding: 15px 0px 0px 0px;
}

.abstand {
width: 100%;
padding: 10px 0px 0px 110px;
}


/* Portfolio */

#portfolio ul {
margin: 0px -7px 0px -7px;
padding: 0px;
line-height: 0px;
display: -webkit-flex;	
display: flex;
flex-wrap: wrap;
}

#portfolio ul li {
position: relative;
flex: 1 1 calc(100% / 4);
max-width: calc(100% / 3 - 13px);
margin: 0px 6px 13px 7px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

#portfolio ul li img {
width: 100%;
height: auto;
margin: 0px 0px 0px 0px;
}

/* Portfolio JP */

#portfolio_jp ul {
margin: 0px -7px 0px -7px;
padding: 0px;
line-height: 0px;
display: -webkit-flex;	
display: flex;
flex-wrap: wrap;
}

#portfolio_jp ul li {
position: relative;
flex: 1 1 calc(100% / 4);
max-width: calc(100% / 3 - 13px);
margin: 0px 6px 20px 7px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

#portfolio_jp ul li img {
width: 100%;
height: auto;
margin: 0px 0px 10px 0px;
}

#portfolio_jp ul li.blanko img {
width: 100%;
height: 100%;
margin: 0px 0px 10px 0px;
}


@media only screen and (max-width: 700px) {

#wrapper {
width: 100%;
max-width: 855px;
padding: 0px;
border-left: none;
border-right: none;
}

#content {
width: 100%;
height: auto;
min-height: 100vh;
padding: 30px 30px 16px 30px;
background: #ffffff;
}

#portfolio ul li {
position: relative;
flex: 1 1 calc(100% / 3);
max-width: calc(100% / 2 - 14px);
margin: 0px 7px 14px 7px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

#portfolio ul li.blanko {
display: none;
}

#portfolio_jp ul li {
position: relative;
flex: 1 1 calc(100% / 3);
max-width: calc(100% / 2 - 14px);
margin: 0px 7px 30px 7px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

#portfolio_jp ul li.blanko {
display: none;
}

}


@media only screen and (max-width: 400px) {

#portfolio ul li {
position: relative;
flex: none;
max-width: 100%;
margin: 0px 0px 14px 0px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

#portfolio_jp ul li {
position: relative;
flex: none;
max-width: 100%;
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
float: left;
list-style-type: none;
transition: all 200ms ease 10ms;
}

}



a:link { 
color: #000000;
text-decoration: none;
transition: all 200ms ease 10ms;
}

a:active { 
color: #000000;
text-decoration: none;
transition: all 200ms ease 10ms;
}

a:visited { 
color: #000000;
text-decoration: none;
transition: all 200ms ease 10ms;
}

a:hover { 
color: #000000;
text-decoration: underline;
transition: all 200ms ease 10ms;
}
/* cmsms stylesheet: imglb modified: Donnerstag, 2. April 2026 11:22:44 */
:root {
  --lb-overlay-opacity: 1;
  --lb-overlay-bg: #ffffff;
  --lb-border-radius: 0px;
  --lb-image-border-width: 0px;
  --lb-image-border-color: none;
  --lb-container-bg: white;
  --lb-text-color: #ccc;
  --lb-caption-link-color: #4ae;
  --lb-number-color: #999999;
  --lb-nav-transition-speed: 0.2s;
  --lb-close-transition-speed: 0.2s;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--lb-overlay-bg);
  opacity: var(--lb-overlay-opacity);
  display: none;
}

.lightbox {
  position: fixed;
  left: 0;
top: 30px !important;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: var(--lb-border-radius);

  /* Image border */
  border: var(--lb-image-border-width) solid var(--lb-image-border-color);
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: var(--lb-container-bg);
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(https://www.jannklee.com/uploads/website/loading.gif) no-repeat;
}

.lb-nav {
  position: relative;
  bottom: -3px;
  left: 0px;
  height: 20px !important;
  width: 75px;
  z-index: 10;
margin: 0px auto;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 30px !important;
  cursor: pointer;
  display: block;
position: relative;
}

.lb-nav a.lb-prev {
  width: 30px;
  left: 0px;
  float: left;
  background: url(https://www.jannklee.com/uploads/website/prev2.svg) left no-repeat;
background-size: 20px auto;
  opacity: 1;
  transition: opacity var(--lb-nav-transition-speed);
}

.lb-nav a.lb-prev:hover {
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 30px;
  right: 0px;
  float: right;
  background: url(https://www.jannklee.com/uploads/website/next2.svg) right no-repeat;
background-size: 20px auto;
  opacity: 1;
  transition: opacity var(--lb-nav-transition-speed);
}

.lb-nav a.lb-next:hover {
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 0px;
  width: 100%;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0px;
  color: var(--lb-text-color);
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
display: none;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: var(--lb-caption-link-color);
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: var(--lb-number-color);
}

.lb-data .lb-close {
  display: block;
/*  float: right; */
margin: 0px auto;
  width: 30px;
  height: 30px;
  background: url(https://www.jannklee.com/uploads/website/close2.svg) top 12px center no-repeat;
background-size: 15px auto;
  text-align: right;
  outline: none;
  opacity: 1;
  transition: opacity var(--lb-close-transition-speed);
position: relative;
z-index: 30;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  opacity: 1;
}