:root {
	--dh-blue: #204805; /* green */
	--dh-orange: #e8a60c;
}

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; src: url('../files/fonts/playfair-display-v20-latin-500.eot');  src: local(''), url('../files/fonts/playfair-display-v20-latin-500.eot?#iefix') format('embedded-opentype'), url('../files/fonts/playfair-display-v20-latin-500.woff2') format('woff2'), url('../files/fonts/playfair-display-v20-latin-500.woff') format('woff'), url('../files/fonts/playfair-display-v20-latin-500.ttf') format('truetype'), url('../files/fonts/playfair-display-v20-latin-500.svg#PlayfairDisplay') format('svg'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; src: url('../files/fonts/playfair-display-v20-latin-500italic.eot'); src: local(''), url('../files/fonts/playfair-display-v20-latin-500italic.eot?#iefix') format('embedded-opentype'), url('../files/fonts/playfair-display-v20-latin-500italic.woff2') format('woff2'), url('../files/fonts/playfair-display-v20-latin-500italic.woff') format('woff'), url('../files/fonts/playfair-display-v20-latin-500italic.ttf') format('truetype'), url('../files/fonts/playfair-display-v20-latin-500italic.svg#PlayfairDisplay') format('svg'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; src: url('../files/fonts/playfair-display-v20-latin-700.eot');   src: local(''), url('../files/fonts/playfair-display-v20-latin-700.eot?#iefix') format('embedded-opentype'), url('../files/fonts/playfair-display-v20-latin-700.woff2') format('woff2'), url('../files/fonts/playfair-display-v20-latin-700.woff') format('woff'), url('../files/fonts/playfair-display-v20-latin-700.ttf') format('truetype'), url('../files/fonts/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; src: url('../files/fonts/playfair-display-v20-latin-800.eot');   src: local(''), url('../files/fonts/playfair-display-v20-latin-800.eot?#iefix') format('embedded-opentype'), url('../files/fonts/playfair-display-v20-latin-800.woff2') format('woff2'), url('../files/fonts/playfair-display-v20-latin-800.woff') format('woff'), url('../files/fonts/playfair-display-v20-latin-800.ttf') format('truetype'), url('../files/fonts/playfair-display-v20-latin-800.svg#PlayfairDisplay') format('svg'); }
@font-face { font-family: 'Satisfy'; font-style: normal; font-weight: 400; src: url('../files/fonts/satisfy-v10-latin-regular.eot'); src: local('Satisfy Regular'), local('Satisfy-Regular'), url('../files/fonts/satisfy-v10-latin-regular.eot?#iefix') format('embedded-opentype'), url('../files/fonts/satisfy-v10-latin-regular.woff2') format('woff2'), url('../files/fonts/satisfy-v10-latin-regular.woff') format('woff'), url('../files/fonts/satisfy-v10-latin-regular.ttf') format('truetype'), url('../files/fonts/satisfy-v10-latin-regular.svg#Satisfy') format('svg'); }

/* foundation */
.reveal { width: 90vw; max-width: 90vw; padding: 3rem; }
/**/

body { font-family: 'Playfair Display', sans-serif; color: #111; background: url('../img/bg/bg_main.jpg') #e5e5e5; }
h1, h2, h3, h4  { font-family: 'Satisfy', fantasy, cursive; }
h1 { font-size: 4.5rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 1.8rem; font-weight: 700; }
h4 { font-size: 1.8rem; font-weight: 700; white-space: nowrap;  }
h4::before, h4::after { content: '__________'; transform: translateY(-.25em); display: inline-block }
h4::before { margin-right: 1em; }
h4::after { margin-left: 1em; }
section.legal h4::before, section.legal h4::after { display: none; }

p, ul , ol { font-size: 1.4rem; }

table thead th, table tfoot td { text-align: inherit; }
figure { margin: 0; }
figcaption { font-size: .8rem }

cite { color: inherit; font-size: inherit; font-style: italic; }

/**/
.ilightbox-holder.metro-black .ilightbox-inner-toolbar .ilightbox-title { font-size: 12px; }
/**/

.secFullHeight { min-height: 100%; background-size: cover }
#sec1 h2 { font-size: 1.8rem; }
#sec1 span.active { color: yellow;}
a.button i { margin-right: .6rem;}

.herotext p { font-size: 1.8rem; line-height: 1.25em; font-weight: 700; text-align: justify; letter-spacing: -0.025em;}
.text-shadow { text-shadow: 3px 3px 0 #000; }
.text-shadow a.button { text-shadow: none; }
.text-dark { color: #000; }

.sliderSection { max-height: 100%; }
.sliderSection img { max-height: 100%; }

.arrowdown { position: absolute; left: 50%; bottom: 25px; z-index: 8}	
.arrowdown a i { font-size: 3rem; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,.5); }	

.arrowdown2 { display: block; text-align: center; margin-top: 6rem; }
.arrowdown2 a { font-size: 3rem; color: #f7a900; }

/**/

form .form-error { background: rgba(200,30,30,1); color: #fff; padding: .3rem; text-shadow: none; font-weight: normal; }
form .form-error label { color: #fff; padding-left: .3rem}
form .alert.callout  p { text-shadow: none !important; font-size: .9rem !important; }

/**/

.title-bar { background: rgba(0,0,0,.25); }
body.page-index .title-bar { background: var(--dh-blue); }
.title-bar img, .title-bar a { transition: .3s all; }
.title-bar img { max-height: 90px; width: auto; padding: .3rem }
.title-bar ul  > li > a, .title-bar ul  > li > a::after { color: #fff; }
.title-bar ul  > li  > a { padding: .75rem .9rem .6rem; margin-left: .3rem; font-family: 'Satisfy', sans-serif; font-size: 1.5rem; }
.title-bar ul  > li > a:hover, .title-bar ul  > li > a:hover::after, .title-bar ul > li > a.active { background: var(--dh-orange); color: var(--dh-blue); border-radius: 12px; }
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #fff transparent transparent; }
.is-dropdown-submenu { background: #333; border-color: #000; }

.top-bar-right { margin-top: 1.5em; -webkit-transition: all 0.45s ease-out; -moz-transition: all 0.45s ease-out;  -ms-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; }
.top-bar-right .stress a { border: 2px var(--dh-orange) solid; border-radius: 9px; }

.title-bar.is-at-top.is-stuck { background-color: rgba(32,72,5,.75); }
.title-bar.is-at-top.is-stuck .top-bar-right { margin-top: 0; }
.title-bar.is-at-top.is-stuck img { max-height: 50px;}
.title-bar.is-at-top.is-stuck a { paddding: .3rem 1rem;}

.title-bar .toggle { display: none; margin-right: 1.5rem; }
.title-bar .toggle a { color: #fff; font-size: 1.8rem; float: right}

footer { background: var(--dh-blue); color: #fff; font-family: Arial, Helvetica, sans-serif, sans; font-size: 11px; text-transform: uppercase; padding: .6rem; 	}
footer a { color: goldenrod;}
footer a:hover, footer a:focus { color: yellow;}

/**/

ul.checkers  { list-style-type: none; margin-left: 0 }
ul.checkers li::before { font-family: 'FontAwesome'; content: "\f00c"; color: var(--dh-orange); font-size: 1.8rem; margin-right: .6rem; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }

/*add:*/
ul.checkers li { position: relative; padding-left: 2rem; margin-bottom: 1.5rem; }
ul.checkers li::before { position: absolute; margin-left: -2.4rem; top: -.5rem; }

.button { background-color: #000; }
.button.contra { background-color: #fff; color: #000 }
.button:hover, .button:active, .button:focus { background-color: maroon; }
.button.contra:hover, .button.contra:active, .button.contra:focus { background-color: maroon; color: #fff }

/**/

#features, #shop  { background:rgba(232,166,12,.1); margin: 3rem auto 0; }
#features p { padding: 1em }


.slidercontent .orbit-slide img { max-height: 75vh; width: auto; border: 1px var(--dh-blue) solid; }
.slidercontent .orbit-caption { font-size: 1rem; font-weight: 400; background-color: var(--dh-blue); width: auto; left: 50%; transform: translateX(-50%); padding: 0.3rem 1rem; border-top-left-radius: 9px; border-top-right-radius: 9px }

#shop .paypalButton { max-width: auto; margin: 0 auto; }
#shop .paypalButton { background: #fff; padding: 1rem; }
#shop .bg-orange  img { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#shop .bg-orange  img.produktbild, #shop .produktbilder img { margin: 1.5rem auto; border: 1px #aaa solid;  }
#shop .produktbilder img:hover, #shop .produktbilder img:focus { opacity: .9; border-color: #777 }
#shop .orbit { max-width: 397px; margin: 0 auto; }
#shop .orbit-caption, #shop .orbit-next, #shop .orbit-previous { color: #000; background: rgba(255,255,255,.5); }
#shop .bg-orange .paypalButton img { cursor: pointer; }
#shop h2 { font-size: 4.2rem; text-shadow: 1px 2px 0 rgba(0,0,0,.8) }
#shop h4 { font-size: .7rem; text-transform: uppercase; font-weight: 800; letter-spacing: .15em; }
#shop select { max-width: 200px; }

table.prices { font-size: 1.2rem; border-radius: 1rem; overflow: hidden; transition: all .2s }
table.prices:hover {  transform: perspective(1500px) rotateY(-7.4deg); }
table.prices td, table.prices th {  background: #333; color: #fff; padding: 1.5rem 0 }
table.prices tbody tr:hover td { background: #222; color: goldenrod; }
table.prices td { border-bottom: 1px #aaa dotted }
table.prices thead th, table.prices tfoot td { font-size: 1.5rem; color: goldenrod }
table.prices thead:hover th, table.prices tfoot:hover td { color: #e8be56 }
.kleingedrucktes, .kleingedrucktes p, p.kleingedrucktes, #shop p.info { font-size: .9rem; }

.form1 { background: #fff; padding: 1.5rem; border-radius: 1.5rem;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.25); }
.formfield.formfield_70 { width: 64%; margin-right: 2%; display: inline-block; }
.formfield.formfield_50 { width: 47%; margin-right: 2%; display: inline-block; }
.formfield.formfield_30 { width: 30%; margin-right: 2%; display: inline-block; }
.formfield.web { display: none; }

table.bestellung { border-top: 1px #777 solid; border-bottom: 1px #777 solid }
table.bestellung thead { background: #e3ecd2; border: none; }
table.bestellung tfoot { border: none; }
table.bestellung tbody { border: 1px #333 solid; }
table.bestellung th:last-child, table.bestellung td:last-child { width: 25%; }
table.bestellung tr:hover td { background-color: #e3ecd2; }
table.bestellung tfoot td { font-weight: normal; }
table.bestellung tfoot tr:last-child td { font-weight: bold; background: #555; color: #fff }
table.bestellung tfoot td:last-child { text-align: right; }
.form1 .button.submit { background: var(--dh-blue); }
.form1 .button.submit:hover, table.bestellung .button.submit:focus { background: darkgoldenrod; }

.product-title { font-weight: bold; }
.product-price { font-style: italic; }
.product-byline { font-size: .9rem }


img.inhalt { margin-top: 3rem; border: .3rem var(--dh-blue) solid; border-top-color: var(--dh-orange); border-left-color:var(--dh-orange); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5); }
#inhalt h3 { margin-top: 1em; }
#inhalt h3::before { content: '✼ '; }
#inhalt h3::after { content: ' ✼'; }
#inhalt p { padding: 0 1em; }

/**/

.para { background: no-repeat fixed 50% 50%; background-size: cover; height: 100vh; 	font-family: 'Satisfy', cursive; font-size: 3rem; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.5); position: relative; }
.para > .row { position: absolute; top: 50vh; left: 3rem; transform: translateY(-50%); }

.para3.inViewport .columns { animation: paraSlideIn 1.5s; }
.para3.inViewport  { animation: paraOverdriveIn 1.5s; }


@keyframes paraSlideIn
{
	0%
	{
		transform: translateX(100vw);
	}
	50%
	{
		transform: rotateY(180deg);
	}
	100%
	{
		transform: none;
	}
}
@keyframes paraOverdriveIn
{
	0%
	{
		filter: brightness(300%) contrast(200%);
	}
	100%
	{
		filter: none
	}
}


.bgimage { width: 100%; height: 100%; background-size:cover; background-repeat: no-repeat; }
.bgimage.bgcenter { background-position: 50% 50%; }
.bgimage.bgcontain { background-size: contain; background-position: center 40%; background-size: 90%; }
.bgimage picture, .bgimage img { display: none; }

.bg-full { background-size: cover; height: 100vh; }
.bg-black-trans { background: rgba(0,0,0,.5); padding: 1rem; border-radius: 3px; }
.bg-blue { background: #304ead;  background-image: linear-gradient(to bottom right, #304ead, #43841f); opacity: 1; color: white; position: relative }
.bg-gray { background: #eee; color: #000}
.bg-red { background: #304ead;  background-image: linear-gradient(to bottom right, #972b0e, #f5f3db); opacity: 1; color: white; position: relative; text-shadow: 2px 2px 1px #000; }
.bg-white { background: #fff; color: #000}
.bg-orange { background: #e8a60c; }
.bg-orange h2 { color: #fff; font-size: 3rem; }
.bg-orange strong { font-weight: 800 }
.bg-black { background: #000; background: rgba(0,0,0,.65); color: #fff; text-shadow: 2px 2px 1px #000}
.bg-black label { color: #fff; }
.bg-padme { padding: 1.5rem }
.bg-roundme { border-radius: 1.2rem }
.bg-shortroundme { border-top-left-radius: 1.2rem; border-bottom-right-radius: 1.2rem;  }

/**/

.floatbreaker { clear: both; }
.padme { padding: 6rem 0; }

.grid { display: grid; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr) }
.grid-3 { grid-template-columns: repeat(3, 1fr) }
.grid-4 { grid-template-columns: repeat(4, 1fr) }
.grid-5 { grid-template-columns: repeat(5, 1fr) }
.grid-6 { grid-template-columns: repeat(6, 1fr) }
@media screen and (max-width: 920px) { .grid-5 { grid-template-columns: repeat(3, 1fr) } }
@media screen and (max-width: 600px) { .grid-5 { grid-template-columns: repeat(2, 1fr) } }
@media screen and (max-width: 360px) { .grid-5 { grid-template-columns: 1fr } }		
				
.margin-top-0 { margin-top: 0 !important; }
.margin-top-s { margin-top: 1rem; }
.margin-top-m { margin-top: 2rem; }
.margin-top-l { margin-top: 3rem; }
.margin-top-xl { margin-top: 4.5rem; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-s { margin-bottom: 1rem; }
.margin-bottom-m { margin-bottom: 2rem; }
.margin-bottom-l { margin-bottom: 3rem; }
.margin-bottom-xl { margin-bottom: 4.5rem; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-s { padding-top: 1rem; }
.padding-top-m { padding-top: 2rem; }
.padding-top-l { padding-top: 3rem; }
.padding-top-xl { padding-top: 4.5rem; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-s { padding-bottom: 1rem; }
.padding-bottom-m { padding-bottom: 2rem; }
.padding-bottom-l { padding-bottom: 3rem; }
.padding-bottom-xl { padding-bottom: 4.5rem; }
#sec1.padme { padding: 3rem 0; }
.spaceme { margin: 3rem auto; }
.centerme { text-align: center; }
.fixme { position: fixed; }

img.fullwidth, img.expanded { width: 100%; height: auto; }
.row.broad { min-width: 90% }
.row.full { min-width: 100% }

.ds-content h1, .ds-content h2, .ds-content h3, .ds-content h4 { font-family: 'Playfair Display', sans-serif; }
.ds-content h2 { margin-top: 2.1rem }
.ds-content h4 { white-space: initial; color: #000; text-shadow: none; margin: 3rem 0 1rem; }
.ds-content h4::before, .ds-content h4::after { display: none; content: ''; transform: none; }
.ds-content ul, .ds-content li, .ds-content li p { padding-left: 0; font-size: 1.5rem; line-height: 2.1rem; }
.ds-content p, .ds-content li { font-size: 1.5rem; line-height: 2.1rem; }
.ds-content p a { color: maroon; }

/**/

@media screen and (orientation:portrait)
{
	img.aufmacher.portrait { display: block; width: 100% }
	img.aufmacher.landscape { display: none !important; }
}
@media screen and (orientation:landscape)
{
	img.aufmacher.portrait { display: none !important; }
	img.aufmacher.landscape { display: block; }
}

.mobile-only { display: none; }

@media screen and (max-width: 1600px)
{
	.para { font-size: 4.2rem; }
}

@media screen and (max-width: 1600px)
{
	p, ul, ol {font-size: 1.2rem; }
}
@media screen and (max-width: 1280px)
{
	.title-bar .top-bar-right li:first-child { display: none; }
}

@media screen and (max-width: 1024px) /* Foundation medium */
{
	
	#inhalt .item { height: auto !important }
	.slidercontent { background: rgba(0,0,0,.1); padding: 3rem 0; }
	
	.title-bar { background: #2e2e2e; }
	.title-bar .toggle { display: block; }
	.title-bar .top-bar-left img  { max-height: 50px;}
	.title-bar .top-bar-left { margin-left: 1.5rem }
	.title-bar .top-bar-right { float: none; display: none; clear: both; }
	.title-bar .top-bar-right li:first-child { display: initial; }
	.title-bar .top-bar-right.visible { display: block; margin-top: 4.5rem;}
	.title-bar ul > li { display: block; }
}

@media screen and (max-width: 900px)
{
	.mobile-only { display: block; }
	.arrowdown { display: none; }
	
	h4 { white-space: initial;  }
	h4::before, h4::after { display: none; content: ''; transform: none; }

	
	
	.row, .row.broad { max-width: 90%; }
	.title-bar .row { max-width: 100%; }
	
	h1 { font-size: 3.2rem; }
}

@media screen and (max-width: 640px) /* Foundation small */
{
	#shop h2 { font-size: 3rem }
	.reveal { width: 100vw; max-width: 100vw; padding: 3rem; }
	.bgimage { background-image: none !important; }
	.bgimage img, .bgimage picture { display: block; margin-bottom: 2.1rem; }
}

@media screen and (max-width: 560px)
{
	.formfield.formfield_30, .formfield.formfield_50, .formfield.formfield_70  { width: 100%; margin-right: 0; display: block; }
}
@media screen and (max-width: 480px)
{
	#story p, #inhalt p { text-align: justify; }
	#features div.columns p:first-child { text-align: center }
	 h1, h2, h3, h4, p { hyphens: auto; -webkit-hyphens: auto; }
}

@media screen and (max-width: 360px)
{
	#story p { hyphens: auto; -webkit-hyphens: auto; }
}