@charset "utf-8";
/**Farben**/
/* CSS Code wenn Dark Mode nicht aktiv */ 
h1 {
color:grey
}
h2 {
color:grey
}
a {
color:black
}
.customer {
color:grey
}
legend {
color:grey
}
input,select,textarea {
color:black
}
button {
background-color:linen
}
.hinweis{
background-color:linen
}
.hinweis a{
color:black
}
body {
background-color:snow
}
header {
background-image:url(../bilder/allgemein/cristecouture.svg);
background-color:snow
}
.socialmedia { 
background-color:snow;
opacity:.5
}
.newsfeed { 
color:black;
background-color:snow;
opacity:.5
}
figcaption {
color:white;
background:none
}
#cookie {
background:#eee
}
#cookie a.button {
background:#ccc
}
#cookie a.button:hover {
background-color:#aaa
}
@media screen and (max-width:59em) {
		.nav-toggle {
		color:black;
		background-color:snow
		}
		nav a {
		background-color:grey;
		opacity:.5;
		color:white
		}
	}

@media (prefers-color-scheme: dark) {
/* CSS Code wenn Dark Mode aktiv */ 
* {
color:white
}
h1 {
color:silver
}
h2 {
color:silver
}
a {
color:silver
}
.link {
color:silver
}
.customer {
color:silver
}
legend {
color:silver
}
input,select,textarea {
color:black
}
button {
background-color:linen;
color:black
}
.hinweis{
background-color:linen
}
.hinweis a{
color:black
}
body {
background-color:#323232;
#background-color:floralwhite;
}
header {
background-image:url(../bilder/allgemein/cristecouture_dark.svg);
background-color:#323232
}
.socialmedia { 
background-color:#323232;
opacity:.5
}
.newsfeed { 
color:white;
background-color:#323232;
opacity:.5
}
figcaption {
color:white
}
#cookie {
background:#eee
}
#cookie a.button {
background:#ccc;
color:black
}
#cookie a.button:hover {
background-color:#aaa;
color:black
}
#cookie p.cookiemessage {
color:black
}
@media screen and (max-width:59em) {
	.nav-toggle {
	color:black;
	background-color:silver;
	#opacity:.5
	}
	nav a {
	background-color:silver;
	opacity:.5;
	color:black
	}
}
}


/**Schriften**/
@font-face {
font-family:'Radley-Regular';
font-style:normal;
font-weight:300;
src:url(../fonts/Radley-Regular.ttf)
}
@font-face {	
font-family:'NothingYouCouldDo';
font-style:normal;
font-weight:300;
src:url(../fonts/NothingYouCouldDo-Regular.ttf)
}
@font-face {
font-family:'Poppins';
font-style:normal;
font-weight:200;
src:url(../fonts/Poppins-ExtraLight.ttf)
}


/**allgemein**/
* {
list-style:none;
box-sizing:border-box;
font-family:'Poppins';
text-decoration: none
}
p {
font-size:1.2em
}
h1 {
font-family:'Radley-Regular';
font-size:2em;
font-weight:lighter;
margin-bottom:-10px
}
h2 {
font-family:'Radley-Regular';
font-size:2em;
font-weight:lighter;
margin-bottom:-10px
}
hr {
width:80%
}
a:hover {
font-size:larger;
font-weight:bolder
}
.link:hover {
font-size:larger;
font-weight:bolder
}
.handwrite {
font-family:'NothingYouCouldDo';
font-size:1.2em;
font-weight:lighter;
margin-top:0px;
margin-bottom: 3em
}
.customer {
font-family:'Radley-Regular';
font-size:1.5em;
font-weight:lighter
}

/**Navigation**/
#nav-open:target nav {
height:auto
}
.nav-toggle {
-webkit-flex:1 100%;
flex:1 100%;
padding:0 1em;
cursor:pointer;
text-align:right;
font-size:1.2em
}
#nav-open:target .nav-closed {
display:inline
}
.nav-closed,#nav-closed:target .nav-closed,#nav-open:target .nav-open {
display:none
}
nav {
font-size:1.3em;
width:auto;
float:right;
height:0;
margin-top:4.3em;
overflow:hidden;
transition:height .2s ease-in-out
}
nav li {
float:left;
width:10em
}
nav a {
display:block;
height:100%;
width:100%;
padding:.3em
}
nav a:hover {
font-size:larger;
font-weight:bolder
}
nav a:link {
font-size:1em
}

/**Formularseiten**/
fieldset {
border:0px solid #000;
border-radius:0em;
margin:0 auto
}
legend {
border:0px groove #000;
padding:.5rem 1rem;
font-family:'Radley-Regular';
font-size:2em;
font-weight:lighter
}
input,select {
font-size:1.3em;
width:70%
}
fieldset div {
margin:0;
padding:0
}
fieldset div ul {
list-style:none;
padding:0
}
fieldset div input {
border:0px groove #000;
border-bottom:1px groove #000
}
fieldset div select {	
border:0px groove #000;
border-bottom:1px groove #000
}
fieldset div label:first-of-type {
display:inline-block;
text-align:left;
width:10em
}
textarea {
height:5rem;
width:calc(100% - 1rem);
font-size:1.3em
}
button {
border:0px solid silver;
font-size:larger;
font-weight:bolder
}

/**Einteilung**/
.hinweis{
margin:0 auto;
padding:.5rem 1rem;
text-align:center;
width:70%;
max-width:35em;
border:1px solid silver
}
.hinweis a{
font-size:larger;
font-weight:bolder
}
iframe {
margin:0 auto;
width:100%;
height:50em;
padding:11em 0 0;
position:relative
}
body {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column;
flex-flow:column;
margin:0 auto;
}
header {
z-index:997;
position:fixed; 
height:8em;
width:100%;
background-repeat:no-repeat;
background-position:top 2em center
}
.slider1 {
display:inline-block;
margin:0 auto;
padding:8em 0 0;
position:relative;
max-width:60em;
width:100%
}
video {
display:inline-block;
margin:0 auto;
position:relative;
max-width:60em;
width:100%
}
.socialmedia { 
z-index:998;
position:fixed; 
right:0px;
}
.socialmedia ul { 
padding:0 4px;
margin:0
}
.newsfeed { 
z-index:996;
position:fixed; 
top:5em; 
left:50%;
transform:translatex(-50%);
font-family:'Poppins';
font-size:1.5em;
width:70%;
text-align:center;
padding:1em;
}
article {
-webkit-flex:1 100%;
flex:1 100%;
max-width:60em;
margin:0 auto;
padding:0
}
article p, h1, h2, h3, .customer{
padding:0 10px
}
section {
-webkit-flex:1 100%;
flex:1 100%;
max-width:60em;
margin:0 auto;
padding:0
}
.section {
-webkit-flex:1 100%;
flex:1 100%;
max-width:60em;
margin:0 auto;
padding:0
}
section img {
width:100%;
border:none 0;
max-width:none;
padding:0;
margin:1rem 0 0
}
section p, h1, h2, h3, .customer{
padding:0 10px
}
aside {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-flex:1 100%;
flex:1 100%;
float:left;
width:100%;
max-width:120em;
margin:0 auto
}
aside a {
position:relative;
margin:0 auto;
-webkit-flex:1 0;
flex:1 0
}
figure {
position:relative;
margin:0 auto;
-webkit-flex:1 0;
flex:1 0
}
figure img {
width:100%;
border:none 0;
max-width:none;
padding:0;
margin:0
}
figcaption {
font-size:.8em;
position:absolute;
bottom:1em;
left:1em;
padding:.8em;
line-height:1.7em;
border:1px solid #FFF
}
footer {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-flex:1 100%;
flex:1 100%;
text-align:center
}
footer div {
-webkit-flex:1 0;
flex:1 0;
margin:1em
}
#modelle {
width:100%;
margin:0 auto;
line-height:0;
-webkit-column-count:5;
-webkit-column-gap:0;
-moz-column-count:5;
-moz-column-gap:0;
column-count:5;
column-gap:0
}
#modelle img {
width:100%!important;
height:auto!important
}
#shooting {
width:100%;
margin:0 auto;
padding:0;
line-height:0;
-webkit-column-count:3;
-webkit-column-gap:0;
-moz-column-count:3;
-moz-column-gap:0;
column-count:3;
column-gap:0
}
#shooting img {
width:100%!important;
height:auto!important;
margin:0
}

/**Anfahrt Karten Cookie**/
#cookie {
z-index:999;
position:fixed;
top:0;
left:0;
right:0;
padding:20px;
font-size:14px
}
#cookie a.button {
cursor:pointer;
padding:8px 20px;
margin-left:10px;
border-radius:5px;
font-weight:bold;
float:right
}
#cookie p.cookiemessage {
display:block;
padding:0;
margin:0;
text-align:center
}

/**Anpassung an Screen Größen**/
@media screen and (max-width:99em) {
	#modelle {
	-moz-column-count:4;
	-webkit-column-count:4;
	column-count:4
	}
}
@media screen and (max-width:79em) {
	#modelle {
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3
	}
}
@media screen and (max-width:59em) {
	#figure02 {
	display:none
	}
	#figure04 {
	display:none
	}
	#modelle {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2
	}
	#shooting {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2
	}
}
@media screen and (max-width:39em) {
	input,select {
	width:100%
	}
}
@media screen and (min-width:59.01em) {
	header {
	height:11em
	}
	figcaption {
	font-size:1em
	}
	.nav-toggle {
	display:none!important
	}
	nav {
	width:auto;
	padding:3.5em 0 0;
	float:left;
	position:relative;
	left:50%;
	transform:translatex(-50%);
	display:block!important;
	height:auto;
	margin-top:1em
	}
	nav li {
	display: inline;
	width:auto
	}
	nav a {
	width:100%;
	padding:.5em .5em;
	font-size:1.25em
}
	.socialmedia li { 
	display:inline;
	margin:.5em
	}
	.newsfeed { 
	top:7em;
	width:50%
	}
}