@charset "utf-8";
/**************************************************
stylesheet www.reginajaeger.ch/www.reginajäger.ch
pixelwebdesign | mai 2014 & dezember 2020
**************************************************/
/*******************************************
kalibrierung, reset, webfont
*******************************************/
* {
    font-style: normal;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: normal;
}
ol,
ul {
    list-style: none;
    list-style-position: inside;
}
blockquote,
q {
    quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
a,
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img {
	max-width: 100%;
}
@font-face {
    font-family: 'reginahandschriftmedium';
    src: url("../font/reginahandschrift-webfont.eot");
    src: url("../font/reginahandschrift-webfont.eot?#iefix") format('embedded-opentype'),url(../font/reginahandschrift-webfont.woff) format('woff'),url(../font/reginahandschrift-webfont.ttf) format('truetype'),url(../font/reginahandschrift-webfont.svg#reginahandschriftmedium) format('svg');
    font-weight: normal;
    font-style: normal;
}
/*******************************************
body, wrapper, allgemeine einstellungen
*******************************************/
a {
    color: #000;
}
body {
    color: #000;
    font-family: 'reginahandschriftmedium',sans-serif;
    position: relative;
}
#preloader {
	align-items: center;
	color: #000;
	display: flex;
	font-size: 32px;
	height: 100vh;
	justify-content: center;
	text-align: center;
}
#preloader img {
    max-width: 135px;
}
#preloader p {
    letter-spacing: 2px;
    margin-top: 20px;
}
#wrapper {
    background-color: #fff;
    display: none;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.cf:after,
.cf:before {
    content: " ";
    display: table;
}
.cf:after,
.clear {
    clear: both;
}
.hidden {
    display: none!important;
}
.desktop_hidden {
    display: none;
}
/*******************************************
navigation
*******************************************/
nav {
    font-size: 32px;
    height: 35px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;
}
nav ul {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    display: flex;
    height: 33px;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 980px;
    padding: 0 20px;
    transition: box-shadow .6s;
}
nav ul.box-shadow {
    box-shadow: 0 0 2px #484848;
    transition: box-shadow .6s;
}
nav ul li a {
    padding: 0 20px;
    transition: background .6s;
}
.no-touchevents nav ul li a:hover {
    background: #333;
    background: radial-gradient(circle, #484848, #131313);
    color: #ccc;
    color: rgba(204,204,204,0.8);
    transition: background .6s;
}
/*******************************************
header
*******************************************/
header {
    background-color: #fff;
    border-radius: 10px 0 0 10px;
    color: #000;
    height: 108px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: right;
    top: 120px;
    transition: transform 0.2s;
    transform: translateX(176px);
    z-index: 991;
}
header:hover {
    transform: translateX(0);
    transition: transform .4s;
}
header a {
    color: #000;
    display: flex;
}
header img {
    display: block;
    height: 110px;
    padding: 16px 25px 16px 20px;
    width: 150px;
}
header h1 {
    font-size: 32px;
    padding: 10px 20px 0 0;
}
header .tel {
    display: block;
    font-size: 25px;
    padding-right: 20px;
}
/*******************************************
slider
*******************************************/
/* browser reset */
.flex-container a:active,
.flex-container a:focus,
.flexslider a:active,
.flexslider a:focus {
    outline: none;
}
.flex-control-nav,
.flex-direction-nav,
.slides {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* flexslider necessary styles */
.flexslider {
    position: relative;
    margin: 0;
    padding: 0;
}
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    height: 100vh;
}
/* hide the slides before the js is loaded. avoids image jumping */
.flexslider .slides img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}
.flex-pauseplay span {
    text-transform: capitalize;
}
/* clearfix for the .slides element */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .slides {
    display: block;
}
* html .slides {
    height: 1%;
}
/* no-javascript fallback */
.no-js .slides > li:first-child {
    display: block;
}
/* flexslider default theme */
.flexslider {
    background: #333;
    z-index: 990;
}
.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.loading .flex-viewport {
    max-height: 300px;
}
.carousel li {
    margin-right: 5px;
}
/* direction nav */
.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: 0;
}
.flex-direction-nav .flex-prev {
    left: -36px;
}
.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 0;
}
.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 0;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 1;
}
/* control nav */
.flex-control-nav {
    position: absolute;
    right: 20px;
    top: 240px;
    width: auto;
    z-index: 10;
}
.flex-control-nav li {
    margin: 0 5px;
    display: inline-block;
}
.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #666;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border: 1px solid rgba(204,204,204,0.8);
}
.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0,0,0,0.5);
}
.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(204,204,204,0.8);
    cursor: default;
}
.flex-control-thumbs {
    overflow: hidden;
    position: static;
}
.flex-control-thumbs li {
    float: left;
    margin: 0;
    width: 25%;
}
.flex-control-thumbs img {
    cursor: pointer;
    display: block;
    opacity: 0.7;
    width: 100%;
}
.flex-control-thumbs img:hover {
    opacity: 1;
}
.flex-control-thumbs .flex-active {
    cursor: default;
    opacity: 1;
}
/*******************************************
global section settings
*******************************************/
#augenblicke .article,
#about .article,
#contact .article {
    background-image: url("../img/border_small_top.png"), url("../img/border_small_center.png"), url("../img/border_small_bottom.png");
    background-position: 0 0, 0 0, bottom left;
    background-size: 100% auto, 100% 100%, 100% auto;
    background-repeat: no-repeat;
}
#about .article,
#contact .article {
    padding: 20px 25px;
}
.article img {
	display: block;
    width: 100%;
}
.articlecontainer {
    margin: 0 auto;
    max-width: 980px;
    padding: 0 10px 60px;
}
.titelcontainer {
    margin: 0 10px;
    padding: 60px 0;
}
.sectiontitel {
	background-image: url("../img/divider.jpg");
    background-repeat: no-repeat;
    background-position: left 50%;
    /*background-size: 100%;*/
    text-align: center;
}
.sectiontitel span {
    background: #fff;
    display: inline-block;
    font-size: 48px;
    padding: 0 10px;
}
/*******************************************
gallerys
*******************************************/
#augenblicke {
	column-count: 3;
	column-gap: 20px;
}
#augenblicke .article {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -moz-page-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    font-size: 21px;
    margin-bottom: 20px;
}
#augenblicke .article a[data-fancybox-trigger] {
	display: block;
    padding: 20px 25px;
}
#augenblicke .article .title {
    font-size: 32px;
    text-align: center;
}
#augenblicke .article .title + p {
    margin-top: 5px;
}
#augenblicke .article p {
    text-align: center;
}
#augenblicke .article p:not(:last-child) {
    margin-bottom: 5px;
}
#augenblicke .article.gallery p img.link {
    display: inline;
    margin-left: 5px;
    width: 20px;
}
#augenblicke figure {
    margin-bottom: 10px;
	overflow: hidden;
}
#augenblicke .article figure img {
    display: block;
    transition: transform .2s;
}
.no-touchevents #augenblicke .article figure:hover img {
	transform: scale(1.1);
    transition: transform 3s;
}

/*******************************************
about
*******************************************/
#about {
    font-size: 21px;
}
#about .article.about-text {
    background-image: url("../img/border_about_top.png"), url("../img/border_about_center.png"), url("../img/border_about_bottom.png");
    background-position: 0 0, 0 0, bottom left;
    background-size: 100% auto, 100% 100%, 100% auto;
    background-repeat: no-repeat;
    line-height: 1.25;
}
#about .article.about-text p:not(:last-child) {
    margin-bottom: 15px;
}
#about .article.about-text a {
    text-decoration: underline;
}
/*******************************************
contact
*******************************************/
#contact .article.image,
#contact .logo {
	margin-bottom: auto;
}
#contact .logo figure {
    padding: 15%;
}
#contact .logo figure img {
    /* max-width: 180px; */
    max-height: 70%;
    width: auto;
}
address {
    font-size: 28px;
    font-style: normal;
    padding-top: 20px;
    padding-left: 25px;
}
address img {
    width: 30px;
}
address p {
    margin-bottom: 15px;
}
#form_container {
    background-image: url("../img/border_form_top.png"), url("../img/border_form_center.png"), url("../img/border_form_bottom.png");
    background-position: 0 0, 0 0, bottom left;
    background-repeat: no-repeat;
    background-size: 100% auto, 100% 100%, 100% auto;
    padding: 20px 25px;
}
#form_text {
    font-size: 24px;
    line-height: 1.25;
}
form {
    font-size: 22px;
}
fieldset input {
    display: block;
    margin-bottom: 6px;
}
fieldset input,
fieldset textarea {
    -moz-outline-style: none;
    -webkit-appearance: none;
    border: 1px solid #333;
    font-family: sans-serif;
    font-size: 13px;
    min-height: 30px;
    outline: none;
    padding: 2px 4px;
    width: 100%;
}
fieldset textarea {
    max-height: 105px;
    min-height: 105px;
    overflow: auto; /*entfernt scrollbars in ie*/
    resize: none;
}
fieldset p {
    font-size: 16px;
    padding-top: 4px;
    text-align: right;
}
.submit-container {
    text-align: right;
}
input[type="submit"] {
    background-color: #d6d6d6;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-family: 'reginahandschriftmedium',sans-serif;
    font-size: 24px;
    margin: 4px 0;
    padding: 4px 15px;
    width: auto;
}
::-moz-placeholder {
    color: #000;
    font-family: 'reginahandschriftmedium',sans-serif;
    font-size: 22px;
    opacity: 1;
}
::-webkit-input-placeholder {
    color: #000;
    font-family: 'reginahandschriftmedium',sans-serif;
    font-size: 20px;
}
:-ms-input-placeholder {
    color: #000;
    font-family: 'reginahandschriftmedium',sans-serif;
    font-size: 20px;
}
/* old moz */
input:-moz-placeholder {
    color: #000;
    font-family: 'reginahandschriftmedium',sans-serif;
    font-size: 22px;
}
/*******************************************
footer
*******************************************/
footer {
    margin-top: 60px;
    padding: 0 10px;
}
footer img {
    width: 100%;
}
footer p {
    background-image: url("../img/divider.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100%;
    padding: 28px 0 20px;
    text-align: center;
}
#footer-bottom {
    background-color: #333;
    font-family: arial,'sans serif';
    font-size: 12px;
    padding: 6px 4px 6px 0;
    text-align: right;
}
#footer-bottom a {
    color: #666;
}
#footer-bottom a:hover {
    color: #ccc;
}
/*******************************************
toTop
*******************************************/
#toTop {
    background-color: #fff;
    border-radius: 5px;
    bottom: 42px;
    box-shadow: 0 0 2px #484848;
    color: #000;
    cursor: pointer;
    display: block;
    font-size: 120%;
    font-style: normal;
    outline: 0 none;
    padding: 5px 7px;
    position: fixed;
    right: 10px;
    transition: opacity 0.1s ease-out;
    white-space: nowrap;
    z-index: 988;
}
/*******************************************
@media
*******************************************/
@media only screen and (min-width: 981px) {
	nav {
		display: block!important;
	}
    .menu-btn {
        display: none;
    }
} /* @media */
@media only screen and (max-width: 980px) {
    nav {
        display: none;
        height: auto;
        position: static;
    }
    nav ul {
        border-radius: 0;
        flex-direction: column;
        height: auto;
        text-align: left;
    }
    nav ul li {
        border-top: 1px solid #666;
    }
    nav ul li a {
        display: block;
        line-height: 45px;
        padding: 5px 10px 0;
    }
    nav .separator {
        display: none;
    }
    header {
        align-items: center;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        height: auto;
        justify-content: space-between;
        padding: 0 20px 0 5px;
        position: static;
        transform: translateX(0);
    }
    header br {
        display: none;
    }
    header img {
        padding: 5px 10px 5px 0;
        height: 50px;
        width: auto;
    }
    header h1 {
        line-height: 45px;
        padding: 5px 0 0;
        white-space: nowrap;
    }
    header .tel {
        display: none;
    }
    header .menu-btn {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
    }
    header .menu-btn span {
        background-color: #000;
        display: inline-block;
        height: 2px;
        margin: 3px 0;
        transition: opacity .3s, transform .8s;
        width: 25px;
    }
    .nav-open header .menu-btn span {
        transition: opacity .3s, transform .8s;
    }
    .nav-open header .menu-btn span:nth-child(2) {
        opacity: 0;
    }
    .nav-open header .menu-btn span:last-child {
        transform: rotate(45deg) translateY(-4px) translateX(-3px);
    }
    .nav-open header .menu-btn span:first-child {
        transform: rotate(-45deg) translateY(8px) translateX(-8px);
    }
    .flex-control-nav,
    .fancybox-navigation {
        display: none;
    }
    address p {
        margin-bottom: 10px;
    }
    #toTop {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        right: 0;
        padding: 5px 11px;
    }
    #toTop span {
        display: none;
    }
}/* @media */

@media only screen and (max-width: 980px) and (min-width: 768px) {
    address,
    #form_text {
        font-size: 23px;
    }
} /* @media */

@media only screen and (min-width: 768px) {
    #about .article {
        float: right;
        width: calc(33.3333333333% - 10px);
    }
    #about .article.about-text {
        float: left;
        min-height: 586px;
        width: calc(66.6666666666% - 10px);
    }
    #about .article:nth-child(n+3) {
        margin-top: 20px;
    }
    #contact .articlecontainer {
    	display: grid;
    	grid-template-columns: repeat(3,1fr);
    	grid-column-gap: 20px;
    	grid-row-gap: 40px;
    }
} /* @media */

@media only screen and (max-width: 767px) {
    .titelcontainer {
        padding: 50px 0 30px;
    }
    .sectiontitel span {
        font-size: 32px;
    }
    #augenblicke {
        column-count: 2;
        padding-bottom: 0;
    }
    #about .articlecontainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #about .article {
        order: 1;
        width: calc(50% - 10px);        
    }
    #about .about-text {
        margin-top: 20px;
        order: 2;
        width: 100%;
    }
    #about .article:nth-child(2) {
        margin-right: 20px;
    }
    #about .article:nth-child(n+4) {
        display: none;
    }
    #contact .articlecontainer {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;
        justify-content: space-between;
    }
    #contact .articlecontainer > * {
        width: calc(50% - 10px);
        order: 2;
    }
    #contact .articlecontainer .logo {
        order: 1;
    }
    #contact .articlecontainer .image {
        order: 3;
    }
    #form_text p br {
        display: none;
    }
    footer {
        margin-top: 0;
    }
}/* @media */

@media only screen and (min-width: 581px) {
    #contact #form_container {
    	display: flex;
    	grid-column: 1 / span 2;
    	grid-gap: 70px;
    	justify-content: space-between;
    	width: 100%;
    }
    #form_text,
    form {
        width: 50%;
    }
}/* @media */

@media only screen and (max-width: 580px) {
    .flexslider .slides > li {
        height: 75vw;
    }
    .sectiontitel {
        background-size: auto;
        background-position: left 50%;
    }
    #contact address {
    	padding-left: 0;
    }
    #contact #form_container {
    	width: 100%;
    }
    #contact #form_text {
        font-size: 21px;
    	margin-bottom: 20px;
    }
    footer p {
        background-size: auto;
    }
}/* @media */

@media only screen and (max-width: 480px) {
    header {
        padding: 0 10px;
    }
    header h1,
    nav,
    .sectiontitel span,
    #augenblicke .article .title {
        font-size: 27px;
    }
	#augenblicke {
		column-gap: 0;
	}
	#augenblicke .article a[data-fancybox-trigger] {
		padding: 12px 15px;
	}
	#about .article {
		width: 50%;
	}
	#about .article.image {
		margin-right: 0;
		padding: 12px 15px;	
	}
	#about .article.about-text {
		padding: 12px 15px;	
		width: 100%;
	}
    #contact .articlecontainer {
        grid-column-gap: 0;
    }
    #wrapper #contact .article {
        width: 50%;
    }
	#contact .article,
    #contact #form_container {
		padding: 12px 15px;
	}
    #contact .logo {
        display: none;
    }
    #contact #address {
        padding: 0 10px;
        width: 100%;
    }
    footer span.separator {
        display: none;
    }
    footer span.inner {
        display: block;
    }
    footer p {
        background-size: auto;
        line-height: 1.5;
        padding: 10px 0 5px;
    }
}/* @media */
/* end of file mate ;) */