/* cmsms stylesheet: css-seb modified: Thursday, May 28, 2026 11:40:03 AM */
@import url("/fonts/font.css");
* {
margin : 0;
padding : 0;
}
html, body {
font-family : 'Open Sans';
line-height : 150%;
color : #323232;
font-size : 95%;
width : 100%;
background : #fff;
height : 100%;
max-width : 100%;
text-align : center;
}

@keyframes cook {
from {
top : -100em;
}
to {
top : 10em;
}
}

#footer-cookie,
    #footer-cookie * {
      box-sizing: border-box;
animation-duration : 0.5s;
animation-name : cook;
    }

    #footer-cookie {
      display: none;
      position: absolute;
z-index: 10000000000;
top: 10em;
   
      left: 1em;
      width: 40%;
     

      padding: 2em;
     
     
      background: #fff;
border-color: 1px solid #000;
      color: #000;
-webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.33);
-moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.33);
box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.33);
    }
    
    #footer-cookie a {
      color:#e86a06;;
    }

    #footer-cookie #description {
      float: left;
    }

   
    #footer-cookie #accept a {
      border: 1px solid #e86a06;
      padding: 5px 10px;
      text-decoration: none;

    }
@keyframes fadeInUp {
from {
opacity : 0;
transform : translate3d(0,100%,0);
}
to {
opacity : 1;
transform : translate3d(0,0,0);
}
}
.fadeInUp {
animation-name : fadeInUp;
animation-duration : 1.3s;
}
.share {
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center !important;
}
.website {
display : none !important ;
}
.rightpic {
float: right;
width: 40% !important;
height: auto;
margin: 0 0.5em 1.5em 1.5em;
border: 4px solid #fff;
}
#wrapper {
width : 100%;
height : 100%;

}
.sticky {
  position: fixed;
  top: 0;
left: 0;
z-index: 8;
background: #fff;
 transition: background-color 0.8s ease;
height: 7em;
-webkit-box-shadow: -2px 2px 3px 2px rgba(0,0,0,0.12);
box-shadow: -2px 2px 3px 2px rgba(0,0,0,0.12);
}
.sticky + .main {
  padding-top: 4.5em;
}

.parallax {
text-align : center;
position : relative;
width : 100%;
height : 75%;
background-color: #000;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
background-size : cover !important ;
}
.parasmall {
height : 35%;
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center;
}
.slide .arrow.next {
right : 3em;
background : url(https://sebastian-krueger-art.com/uploads/uploads/layout/next.png) 0 50% no-repeat;
background-size : 3em;
}
.slide .arrow.prev {
left : 3em;
background : url(https://sebastian-krueger-art.com/uploads/uploads/layout/prev.png) 0 50% no-repeat;
background-size : 3em;
}
.slide {
width : 100%;
height : 75%;
min-height : 75%;
margin : 0 auto;
position : relative;
overflow : hidden;
top : 0;
left : 0;
pointer-events : none !important ;
}
.slide ul {
position : relative;
margin : 0 auto;
height : 100%;
min-height : 100%;
}
.slide ul li {
width : 100%;
list-style : none;
position : absolute;
z-index : 1;
height : 100%;
top : 0;
left : 0;
}
.slide .arrow {
position : absolute;
top : 50%;
width : 70px;
height : 100px;
pointer-events : auto !important ;
margin-top : -50px;
z-index : 10;
opacity : 0.7;
line-height : 100px;
color : #333;
text-align : center;
text-decoration : none;
}
#responsive, #responsive2 {
padding : 0;
margin : 0;
}
#responsive li {

}
#responsive li, #responsive2 li {
text-align : left;
line-height : 130%;
position : relative;
}
#responsive li img, #responsive2 li img {
width : 100%;
display: block;
}
#responsive span, #responsive2 span {
text-transform: uppercase;
font-size: 120%;
font-weight : bold;
width: 100%;

}
#responsive a, #responsive2 a {
color : #fff;
background : #e86a06;
position : absolute;
top : 0;
right : 0;
font-size : 150%;
}
#responsive {
}




.social {
position : fixed;
top : 40%;
right : 0;
width : 2em;
z-index : 1000;
}

.vid {
font-size: 88%;
display: inline-block;
margin: 0 !important;
padding: 0 !important;
-moz-transform: skew(-7deg, 0deg);
-webkit-transform: skew(-7deg, 0deg);
-o-transform: skew(-7deg, 0deg);
-ms-transform: skew(-7deg, 0deg);
transform: skew(-6deg, 0deg);
text-transform: uppercase;}

.vid li {
list-style-type: none;
float: left;
background: #393838;
margin: 0 4px 2px 0;
padding: 0.5em;
}
.vid a {
display: block;
color: #fff !important;
  -moz-transform: skew(4deg, 0deg);
-webkit-transform: skew(4deg, 0deg);
-o-transform: skew(4deg, 0deg);
-ms-transform: skew(4deg, 0deg);
transform: skew(6deg, 0deg);

}
.social img {
width : 100%;
height : auto;
margin-bottom : 0.5em;
}
.skip {
width : 100%;
text-align : center;
position : absolute;
bottom : 3em;
z-index : 11;
}
.arrow img {
width : 3em;
height : auto;
}

.bigwrap {
padding : 1em 0 1em 0;
}
.dark {
background: #393838;
color: #fff;
}
.dark h2 {
color: #efeeee;
text-shadow: none;
}

.light {
background: #efeeee;}

@media screen {
#menu-mob {
display : none;
}
}

header {
width : 100%;
position : fixed;
z-index : 12;
text-align: center !important;
}
.center {
margin : 0 auto;
text-align : left;
width : 90%;
max-width: 1440px;
padding : 2% 0 2% 0;
}
.center a {
color : #e86a06;
}
.center li {
margin-bottom : 0.3em;
}
.main {
width : 65%;
min-height : 30em;
margin-top : 10em;
}
.links {
float : left;
width : 45%;
font-size: 125%;
line-height: 130%;
font-weight: light;
}
.rechts {
float : right;
width : 42%;
margin-left : 3%;
font-size: 125%;
}
.mitte {
clear : both;
width : 100%;
font-size: 125%;
}
.links img, .rechts img {
width : 100%;
height : auto;
display : block;
margin-left : auto;
margin-right : auto;
}


video {
margin-top: 2em;
width: 65%;
height: auto;
}
.logo {
position: relative;
top: 0;
width : 24em;
left: 50%;
margin-left: -12em;
background : url(https://sebastian-krueger-art.com/uploads/images/krueger-signet-wh.png) no-repeat;
background-size: 100% auto;
z-index: 1;

}
.more {
font-size: 200%;
margin: 0 !important;
padding: 0 !important;
text-transform: uppercase;
}
.logosmall {
position: absolute;
width : 4.5em !important;
top : 1.25em;
left: 20%;
z-index: 8;
background : url(https://sebastian-krueger-art.com/uploads/images/krueger-signet-dark.png) no-repeat;
background-size: 89% auto;
}

.pur {
left: 5%;
width : 4.5em !important;
}
.pur img {width: 100%; height: auto;}

.logo img {
width : 100%;
}
.angebot {
margin-bottom : 2em;
background : #f7fef2;
box-shadow : -1px 2px 5px 0 rgb(0, 0, 0, 0.33);
padding : 0.7em;
position : relative;
}
.img-ang {
float : left;
width : 40%;
margin-right : 1em;
}
.img-ang img {
width : 100%;
height : auto;
}
.re-ang {
float : left;
width : 55%;
}

figcaption {
text-align : center;
font-weight : bold;
}
a {
text-decoration : none;
}
#menu {
position : relative;
top : 2.25em;
text-transform: uppercase;
font-size: 120%;
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center;
}


#menu ul {
list-style-type : none;
}
#menu li {
float : left;
margin-right : 0.1em;
}
#menu a {
color : #fff;
margin-left : 0.6em;
}
 #menu a.currentpage, #menu a.activeparent, .pic2 a, .re-ang a, a.return-link {

font-weight: bold;
color : #fff;


}
.wht a {
color : #323232 !important; font-weight: bold;}
#menu a:hover {
border-width: 100%;

}
.pictitle {
font-size: 70% !important;
line-height: 110%;
}
.sticky a {
color: #393838 !important;
margin-left: 0.3em;
 transition: margin-left 2s ease, ;


}
.sticky a.currentpage {
font-weight: bold;}
.title {
position : absolute;
left: 5%;
bottom: -0.6em;
text-align : center;
display : inline !important ;
z-index : 7;
}
.title span {
text-transform : uppercase;
font-weight : bold;
font-size : 500%;
line-height: 110%;
color: #efeeee;
}
.smaller {font-size: 100% !important;}
#social {
position: absolute;
right: 5%;
top: 2.5em;
}
#social li {
list-style-type: none;
width: 2em;
float: left;
margin-right: 1em;}
#social li img {
width: 100%;
height: auto;}
.anker {
display : block;
position : relative;
top : -5em;
visibility : hidden;
}

h2, h1.starthl, .purchheadline {
margin-top : 0.5em;
margin-bottom : 0.5em;
font-size : 300%;
color : #393838;
line-height : 120%;
text-transform: uppercase;
font-weight : normal;
text-shadow : 2px 2px 0 #CED6D9;
}
h2.starthl {font-size: 350%;}
.purchheadline {
text-shadow: none;
font-weight: bold;
font-size: 400%;}
.parasmall a {
position: absolute;
color: #e86a06;
padding: 1em;
border: 2px solid #e86a06;
text-transform: uppercase;
top: 40%;
font-size: 150%;
font-weight: bold;
}
h3 {
font-size: 140%;
margin-bottom: 1em;
line-height: 120%;
text-transform: uppercase;
}
.description h2, .description-blog h2 {
font-size: 150%;
color : #323232;
text-shadow: none;
font-weight: bold;
}
 .thumbs {
position: relative;
z-index: 5;
}

.nocol {background: none !important;}
.nocol.thumbs img {width: 100% !important;}
h3 br {margin:0;}
h1.starthl {
font-size : 400%;
position : relative !important ;
top : 0;
text-transform : uppercase;
}
#thumblist2 {
overflow: hidden;
padding : 0;
  display : flex;
flex-wrap : wrap;
justify-content : center;
min-height: 100%;
width: 100%;
z-index: 10;
text-align: center;
}

.desbg {
float : none;
width : 100% !important ;
}
.closeall {
  position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 9 !important;
}
.lightbox2 {
  position: fixed;
  background-color: rgba(37, 34, 38, 0.98);
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
min-height: 100%;
height: 100%;
  z-index: 1000;
  opacity: 0;
overflow-y: scroll;
  pointer-events: none;
text-align : center !important;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
   -ms-overflow-style: none;
    scrollbar-width: none;
}
.lightbox2::-webkit-scrollbar {
 display: none;
}
.lightbox2 img {
margin-top : 2em;
}

.picwrap {
position: relative;}
.big {
position: relative;
display: flex;
   flex-wrap:wrap;
align-items: center;
  justify-content: center;
text-align: center;
text-align: center !important;
margin-top: 7.5em;
animation-duration : 1s;
animation-name : slidein;
z-index: 7;

}
.big img {
max-height: 550px; width: auto !important;}
.or2 {
top: 1em;}

.box {
background: rgba(255,255,255,0.8);
display: none;
padding: 2em;
position: absolute !important;
top: 10em;
left: 0;
z-index: 2004;
text-align: left;
width: 70% !important;
animation-duration : 0.5s;
animation-name : opa;
}
.box a {color: #fff;}
.box::after {
  content:"";
  position: absolute;
 
  right: -4px;
  width: 100%;
  height: 600px;
  z-index: -1;

}
.box:target {
outline : none;
display : block;
}
.box h2 {
font-size: 155%;
margin-bottom: 0.3em !important;
}
.tape { position:absolute; top:-15px; right:10px; width: 130px; height: 35px; background-color:#fff; opacity:0.7; border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 1px 0px #cccccc; -moz-box-shadow: 0px 0px 1px 0px #cccccc; box-shadow: 0px 0px 1px 0px #cccccc; -webkit-transform: rotate(6deg) skew(0,0) translate(0%,-5px); -moz-transform: rotate(6deg) skew(0,0) translate(0%,-5px); -o-transform: rotate(6deg) skew(0,0) translate(0%,-5px); transform: rotate(6deg) skew(0,0) translate(0%,-5px); z-index: 301;}
#blogthumb {
display: flex;
   flex-wrap:wrap; }
.boxcl {font-size: 200% !important; cursor: pointer; float: right;}
.lightblog {
width: 22%;
margin: 0 2% 2% 0;
font-size: 140%;
}
.lightblog img {
width: 100%;
height: 250px;
object-fit: cover;
}
.lightbox2 {
position : fixed;
display: block;
overflow: hidden;
z-index : 12;
width : 100%;
 min-height: 100% !important;
  height:auto !important;
  height:100% !important;
 overflow-y: scroll;
top: 0;
left: 0;
background : rgba(0,0,0,0.95);
  opacity: 0;
  pointer-events: none;
text-align : center !important;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.lightbox2::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
.lightbox2 img {
margin-top : 2em;
float : left;
}
.lightbox2:target {
  opacity: 1;
  pointer-events: auto;
}

.description-blog {
position : relative;
z-index : 150 !important ;
width : 70%;
min-height : 20em;
margin-left : auto;
margin-right : auto;
margin-top : 1em;
margin-bottom : 3em;
padding : 6em;
background : #fff;
color : #323232;
text-align : left;
overflow: auto;
}
.description-blog ul {
margin-bottom : 1em !important ;
}

.blogpic, .blogvid  {
float : right !important;
width : 40% !important;
margin : 0 0 1em 1em !important;
}

.description {
position: absolute;
text-decoration : none;
z-index: 90 !important;
width : 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: left;
}
.description ul {
margin-bottom : 1em !important ;
}

.desc-gal {
width: 100%;
}
.desc-gal li {
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center;
width: 100%;
}
.desc-gal h2 {color: #fff;}

.closeall {
  position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 8 !important;
}
.imgnav {
position : absolute;
top : 5em !important;
width: 100%;
text-align: center;
z-index: 200000;
font-size: 105%;
text-transform: uppercase;
font-weight: bold;
}

.imgnav a {color : #fff;}
.previous {
position: absolute;
top: 45%;
left: 1em;
width: 5em;
z-index: 2000;
}

.topclose {
top: 0.5em !important;}
.next {
position: absolute;
top: 45%;
right:3em;
width: 5em;
z-index: 2000;}
.ori {
top: 0;
width: 3em;
}
.ori img {width: 100%;}
.nx2 {
right: 0;}
.imgnav img {

width: 23% !important;
margin-right: 0.08em;}

.toppi {top:11em !important;}
.toppi a{ color: grey !important;}

.exit {
position : absolute;
top : -1em !important;
right : 1em;
width : 1.2em !important ;
}
.tp {
top : 1px;
}

.date {

font-size: 80%;}
.pic2 {
width : 22%;
margin : 0 3% 2% 0;
text-align : left;
color: #efeeee;
float: left;
font-size: 130%;
text-transform: uppercase;
line-height: 110%;
}
.pic2 a, #responsive a, .angebot a, a.return-link {
}

.smaller {
width: 91%;
margin: 0 auto;
text-align: left;
display: block;
margin-top: 10em;
}

.left {
float: left;
width: 45%;
margin-bottom: 2em;
}
.right {
float: right;
width: 45%;
margin-left: 5%;
margin-bottom: 2em;
}
.left img, .right img {
width : 100%;
height : auto;
display : block;

}
a.order, .or2 {
color: #ed6a06 !important;
text-transform: uppercase;
font-weight: bold;
}
a.hl, .angebot a {


font-size: 80%;
}
.pic2 img {
width : 100%;
height: 300px;
border: 2px solid #efeeee;
object-fit: cover;
}
.lightblog, .lightblog a {
color : #393838 !important;
}
.vim img {
width: 100%;
height: auto;}
.gerade {
float: left;
width: 45%;
}
.vim a {
color: #ed6a06;}
.ungerade {
float: left;
width: 45%;

}

.thumb {
float: left;
width : 100% !important ;
}
#thumblist {
display: flex;
   flex-wrap:wrap;
}

.over {
text-transform: uppercase;
position: absolute;
top: 0.5em;
left: 0.5em;
color: rgba(255,255,255,0.7);
z-index: 5;
}
.pic {
position : relative;
display : block;
float : left;
width : 22%;
margin : 0 3% 2% 0;
overflow: hidden;
height: 200px;
 display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.font {font-size: 130%;}

.pic img, .goup {
width: 110% !important;
 position: absolute;

}

.mitte ul, .rechts ul, .links ul, .mitte ol, .rechts ol, .links ol, .main ul {
margin : 0.6em 0 0.5em 1em;
}
footer {
clear : both !important;
color : #dfdddd;
background : #8f8d8d;
width : 100%;
padding : 2em 0 2em 0;
display : block;
font-size : 85%;
text-align: center;
}

footer a {
color : #dfdddd !important ;
}
.zitat {
font-size : 150%;
font-style : italic;
}
#copy {
color : #dfdddd;
background : #363737;
width : 100%;
font-size : 80%;
}

.formbuilderform div {
float : none !important;
}
input, textarea {
float : none !important;
width : 100%;
margin-bottom : 0.5em;
border : none;
margin-top: 1em;
padding: 1%;
border: 1px solid grey;
}
.required, label, .fb_invalid {float : none !important; width: 100%;}
.cms_submit {
border : 0;
width : 50%;
background : #e86a06;
color : #fff;
font-family: "Open Sans";
height: 2em;
font-size: 100%;
clear: both;
}

.captchapict, .captcha img {
width: 50%;
float: left;
}
input {
height : 2em;
}
textarea {
height : 8em;
}
.nl {
text-align : center;
}
.nl input {
width : 100%;
border: 1ps solid #000;
}
.nl-sub {
background : #e86a06 !important ;
width : 30% !important ;
color : #fff;
}
.kontakt .captcha {width: 100%; float: none !important;}
.confirm {
position: absolute;
background: rgba(255,255,255,0.95);
padding: 3em;
top: 12em;
border: 1px solid;
box-shadow:  0 1px 1px rgba(0,0,0,0.11),
              0 2px 2px rgba(0,0,0,0.11),
              0 4px 4px rgba(0,0,0,0.11),
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
z-index: 150;
}
 @media screen and (max-width: 1024px) {
.parallax, .slide li, .parasmall {background-attachment: scroll !important;}
}
@media screen and (max-width: 60em) {
#menu, #menu2 {
display : none;
}

#wrapper {
width: 100%;
}
.parallax {
background-attachment : scroll !important ;
}
iframe {
width: 100%;
}
.sticky {
display : flex;
flex-wrap : wrap;
justify-content : center;
text-align: center;
width: 100%;
padding: 0;
background : #fff url(https://sebastian-krueger-art.com/uploads/images/krueger-signet-dark.png) no-repeat center;
background-size: 4em;
} 
.logosmall {
display: none;
}
.sticky a {
color: #fff !important;
}

.round {
width : 40% !important ;
margin-left : 28% !important ;
}
.roundsmall {
width : 40%;
margin-left : -20%;
}
.anker {
display : block;
position : relative;
top : -6em;
visibility : hidden;
}
.skip {
bottom : 1.5em;
}
.title {
font-size: 1.5vw !important;
width: 70%;
padding: 0;
text-align: left !important;
margin-left: 3%;
line-height: 200%;
}

h2, h1 {font-size: 5vw !important;}
video {
width: 100% !important;
height: 120% !important;
background: #000;
}
#menu-mob {
display : block;
}
.center {
width : 83%;
}
.links, .rechts, .mitte, .main {
float : none !important;
width : 100% !important;
margin-right : 0 !important ;
margin-left : 0 !important ;
margin-bottom : 1.5em;
text-align : left;
}
.bigimg, .responsive {
padding-top: 2em !important;}
.links li {
float: none;
}

.sidenav {
display : block;
height : 100%;
width : 0;
position : fixed !important ;
z-index : 999999 !important ;
top : 0;
left : 0;
background-color : #000;
overflow-x : hidden !important ;
transition : 0.5s;
padding-top : 60px;
margin-bottom : 60px;
}
.sidenav a {
padding : 8px 8px 8px 32px;
text-decoration : none;
font-size : 90%;
color : #fff;
display : block;
transition : 0.3s;
line-height : 100%;
margin : 0;
}
.sidenav a:hover, .offcanvas a:focus {
color : #f1f1f1;
background : none;
}
.sidenav .closebtn {
position : absolute !important ;
top : 0;
right : 25px;
font-size : 36px;
margin-left : 50px;
}
.sidenav {
display : block;
height : 100%;
width : 0;
position : fixed !important ;
z-index : 999999 !important ;
top : 0;
left : 0;
background-color : #000;
overflow-x : hidden !important ;
transition : 0.5s;
padding-top : 60px;
margin-bottom : 60px;
}
.sidenav a {
padding : 8px 8px 8px 32px;
text-decoration : none;
font-size : 90%;
color : #fff;
display : block;
transition : 0.3s;
line-height : 100%;
margin : 0;
}
.sidenav a:hover, .offcanvas a:focus {
color : #f1f1f1;
background : none;
}
.sidenav .closebtn {
position : absolute !important ;
top : 0;
right : 25px;
font-size : 36px;
margin-left : 50px;
}

.ham {
position : absolute;
top : 1.25em;
left : 1em;
}
#menu-mob ul {
list-style-type : none;
float : none;
display : inline-block;
}
#menu-mob li {
float : none !important ;
margin : 0;
}
#menu-mob li ul {
float : none !important ;
}
#menu-mob li ul li {
float : left !important ;
}
#menu-mob img {
width : 2em;
float : left;
position : absolute;
top: 1.5em;
z-index: 9;
}
#menu-mob ul a {
font-weight : bold;
}
#menu-mob li ul a {
font-weight : normal;
}
.logo {top: 0.8em;}
.pic2 {width: 30%;}
.next {
top: -1em;
right: 3em;
width: 3em;
}
.previous {
top: -1em;
left: 3em;
width: 3em;
}
}

@media screen and (max-width: 668px) {
html, body {
font-size : 100%;
}
#responsive span, #responsive2 span {display: none !important;}
 #footer-cookie {width: 100% !important; left: 0 !important;}
.rightpic {width: 100% !important;}
.blogpic {float: none !important; width: 100% !important; margin: 0 !important;}
.description-blog {
padding: 6em 2em;
}
.more {font-size: 130%;}
.big {
margin-left: 0;
margin-right: 0;
width: 100%;
}

.big img {
width: 100% !important;
height: auto !important;
margin-left: 0;
margin-right: 0;
max-height: auto !important ;}
.slide .arrow.next {
right : 1em !important ;
}

.slide .arrow.prev {
left : 1em !important ;
}
.skip {
bottom : 1em !important ;
}
.social {
width : 1.4em !important ;
}
.pic2, .gallery .img {
width : 100% !important ;
}
h2, h1.starthl {

line-height : 110% !important ;
}
.logo {
width: 16em;
margin-left: -8em;
}
.img-ang {
float : none;
width : 100%;
margin-bottom : 1em;
}
.re-ang {
float : none;
width : 100%;
}
}

@media screen and (max-width: 290px) {
.sticky {
background-image: none !important;}
}