html {font-family:Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#000;min-height:100.1%;scroll-behavior:smooth;}
::selection {color:#fff;background-color:#000;}
.dinge ::selection {color:#000;background-color:#fff;}

body {margin:0;background-color:#fff;}
.dinge {background:#000;color:#a46c23;}
.dinge.uebersicht {color:#000;background:#a46c23;}
.home {background:url('../img/start/titelbilder-quadratisch-01.jpg') no-repeat center center;background-size:cover;}
@media screen and (min-width:768px) {.home {background-image:url('../img/start/titelbilder-quadratisch-02.jpg');}}
@media screen and (min-width:1280px) {.home {background-image:url('../img/start/titelbilder-quadratisch-03.jpg');}}

header {display:block;position:fixed;top:0;left:0;padding:0;width:100%;height:auto;text-align:right;}
main {display:block;margin:0;padding:0;}
footer {position:fixed;bottom:0.3em;left:0;padding:0;width:100%;height:auto;}

p {margin:1.2em 0 0 0;}
p:first-child {margin-top:0;} 
figure {display:block;margin:0;}
a {color:inherit;text-decoration:none;}
img {display:block;margin:0;border:0;padding:0;width:auto;max-width:100%;height:auto;}






/* Header */
header {position:relative;margin:0 8%;padding:2.25em 0 4.5em 0;width:auto;height:auto;}
.dinge header {padding-bottom:2em;}
.galerie header {padding-bottom:2em;}
header .inside {position:relative;}
.start header {position:fixed;top:0;left:0;width:272px;height:100%;overflow:visible;}
.start header .inside {position:absolute;top:calc(38% - 12px);left:1.125em;}

/* Logo /////////////////////////////////////////////////////////////////////////////// */
.logo {display:block;position:fixed;left:1.125em;top:38%;z-index:10000;margin:0;width:auto;height:auto;}
.logo img {height:17px;}

/******************************************************************************* 
   Logointro *******************************************************************
********************************************************************************
   1. Modul Zufallsbild mit Logo
   2. Seitenlayout fuer Startseite, eigener Layoutbereich Logointro, Modul und CSS einbinden
   3. Anpassungen Logogroesse
*******************************************************************************/
/* Animation fadeIn/Out */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes fadeOut { 0% {opacity:1;} 99% {opacity:0;} 100% {display:none;z-index:-1000;opacity:0;} }
/* Styling Logointro */
#logointro {position:fixed;top:0;left:0;z-index:100000;width:100%;height:100%;background:#fff;animation:fadeOut 1s forwards;-webkit-animation:fadeOut 1s forwards;animation-delay:1.5s;}
#logointro figure {text-align:center;display:block;position:absolute;top:50%;width:100%;height:auto;}
#logointro figure img {display:inline-block;width:auto;animation:fadeIn 1s forwards;-webkit-animation:fadeIn 1s forwards;}
/* Anpassungen Logogroesse ****************************************************/
#logointro figure {margin-top:-12px;}
#logointro figure img {height:23px;}





/* Hauptmenu ////////////////////////////////////////////////////////////////////////// */
.hauptmenu {margin:0;padding:0;width:auto;height:auto;}
.hauptmenu ul {margin:0 0 0 3em;padding:0;list-style:none;text-align:right;}
.hauptmenu ul li {display:inline;margin:0 0.3em;}
.hauptmenu ul li a {font-family:"serif";font-style:italic;font-size:18px;}

/* Submenu */
.mod_submenu {position:relative;margin:0;border-width:0;border-style:solid;width:auto;height:auto;}
.mod_submenu ul {margin:0 0 0 calc(100% - 192px);padding:0;list-style:none;text-align:left;}
.mod_submenu > ul {padding-left:0;}
.mod_submenu ul li {display:inline;margin:0 0.3em;}
.mod_submenu .mod_customnav {position:absolute;top:0;left:0;}
.mod_submenu .mod_customnav ul li {margin:0;}

/* Responsive Anpassungen */
/* min-width */
@media screen and (min-width:768px) {
	/* Randabstaende vergroessern */
	header {padding:4.5em 0 9em 0;}
	.dinge header {padding-bottom:2em;}
}
@media screen and (min-width:1280px) {
	/* Logo */
	.logo {left:2.25em;}
}
@media screen and (min-width:1792px) {
	/* Randabstaende vergroessern */
	header {padding:9em 0 18em 0;}
	.dinge header {padding-bottom:2em;}
}



/* LAYOUT Backlink */

main {position:relative;}
.mod_backlink,
.back {display:block;position:absolute;top:-59px;margin:0 auto;width:calc(50% - 2em);max-width:calc(512px - 4em);text-align:left;}
.mod_backlink {margin-left:calc(8% - 1em);}

@media screen and (min-width:768px) {
	.mod_backlink,
	.back {width:calc(188px - 2em);}
	.mod_backlink {margin-left:0;}
	.dinge .mod_backlink,
	.dinge .back {left:4em;}
}



/* Artikel */
main > .inside > div {margin:0 10% 2em 20%;width:70%;}
.home main > .inside > div {border:0;}
.dinge main > .inside > div {border-color:#101010;}
main > .inside > div > div > div {display:inline-block;vertical-align:top;width:100%;max-width:512px;}
.drumrum main > .inside > div > div > div,
.kontakt main > .inside > div > div > div {display:block;vertical-align:top;margin-left:auto;margin-right:auto;width:100%;max-width:512px;}
.home main > .inside > div > div {margin:0 auto;max-width:none;}
.galerie main > .inside > div > div {width:100%;max-width:none;}
.drumrum main > .inside > div > div,
.warenkorb main > .inside > div > div,
.danke main > .inside > div > div,
.kontakt main > .inside > div > div {display:block;margin:0 auto;}
main > .inside > div > .first {margin:0 18px 0 0;}
.dinge main > .inside > div > div,
.kleingedrucktes main .mod_article.first {margin-bottom:0;}
main > .inside > .uebersicht {margin-bottom:1em;margin-right:1em;}
main > .inside > .uebersicht > div {vertical-align:middle;}
main > .inside > .uebersicht > .ce_image {margin-top:0;max-width:256px;}
main > .inside > .uebersicht:first-child {padding-top:1.5em;}
main > .inside > .uebersicht:last-child {padding-bottom:2em;}
main > .inside > .uebersicht > .ce_text {padding-right:1em;max-width:calc(512px - 1em);}
main > .inside > div > .ce_image {margin-top:2em;}

.submit_container {padding-top:2.25em !important;}

.for_konsultation {margin-bottom:2.25em !important;}

figure.float_right img {float:right;}

/* Responsive Anpassungen */
@media screen and (max-width:510px) {
	.mod_iso_cart td {font-size:13px;}
	.mod_iso_cart td a,
	.mod_iso_cart .total td {font-size:14px;}
	.mod_iso_cart input[type='number'] {width:2.25em;}
}
@media screen and (min-width:768px) {
	/* Randabstaende vergroessern */
	main > .inside > div {margin:0 8% 2em 8%;width:84%;}
	main > .inside > nav {margin-left:6em;/*padding-top:0.5em;*/width:calc(100% - 12em);}
	.home main > .inside > div {padding-top:0;}
	main > .inside > div > div {margin:0 18px 0 0;}
	.home main > .inside > div > div {margin:0;padding-top:0;}
	.kleingedrucktes main > .inside > div > div > div {padding-right:1em;max-width:calc(256px - 1em);}
	/*.drumrum main > .inside > div > div {display:block;margin:0;width:auto;max-width:1024px;}*/
}
@media screen and (min-width:1024px) {
	/* Randabstaende vergroessern */
	main > .inside > div {position:relative;}
	main > .inside > div > .ce_image {display:block;margin:0;width:calc(100% - 512px);}
}
@media screen and (min-width:1280px) {
	/* Randabstaende vergroessern */
	main > .inside > div.first {margin-bottom:4.5em;}
	main > .inside > nav {margin-left:9em;width:calc(100% - 18em);}
	main > .inside > div > div {margin:0 22px 0 0;}
}




/* LAYOUT Uebersichtsmenu ///////////////////////////////////////////////////////////// */

.uebersicht {margin:0 8% 2em 16%;width:76%;}
.uebersicht .empty {display:none;}
.uebersicht p {margin:0;}
.uebersicht ul {list-style:none;margin:0;padding:0;}
.uebersicht .level_1 {display:block;margin:0 8%;width:auto;text-align:center;padding:6em 0 5em 0;}
.uebersicht .level_1 > li {display:inline-block;vertical-align:top;width:auto;min-width:256px;text-align:left;margin-bottom:2em;}
.uebersicht .level_1 > li > label {color:#000;transition:color 0.5s ease-out;}
.uebersicht > ul > li {display:inline-block;vertical-align:top;width:100%;}
.uebersicht > ul > li a,
.uebersicht > ul > li strong {font-size:14px;font-family:Helvetica,sans-serif;color:#000;}
.uebersicht li .active a {color:#000;}
.uebersicht input[type="checkbox"] {position:absolute;top:-3000px;left:-3000px;width:1px;height:1px;}
.uebersicht .level_2 {position:relative;height:auto;transition:height 1s ease-out;}
.uebersicht input[type="checkbox"]:checked ~ .level_2 {height:auto;}
.uebersicht .level_2 li {display:block;margin:0;}
.uebersicht .level_2 {margin-top:0.5em;}

/* Zurueck zur Uebericht */
.back {display:block;margin:0 auto;width:100%;max-width:calc(512px - 2em);text-align:left;}

@media screen and (min-width:768px) {
	.back {margin:0 0 0 auto;width:188px;}
}




/* LAYOUT Produkteliste */

.produktliste {margin:0 8% 0 calc(8% - 1em);width:auto;height:auto;}

/* Produkt */
.produktliste li {position:relative;display:inline-block;margin:0 -4px calc(1em - 4px) 1em;width:calc(50% - 1em);height:auto;}
@media screen and (min-width:640px) {.produktliste li {width:calc(33.333% - 1em);}}
@media screen and (min-width:1024px) {.produktliste li {width:calc(25% - 1em);}}
@media screen and (min-width:1440px) {.produktliste li {width:calc(20% - 1em);}}

.produktliste li .produktbild {opacity:1;transition:opacity 0.5s ease-out;text-align:center;}
.produktliste li:hover .produktbild {opacity:0.4;}
.produktliste li .produktbild img {margin:0 auto;}
.produktliste li .produktinfos {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 0.5s ease-out;text-align:center;}
.produktliste li:hover .produktinfos {opacity:1;}
.produktliste li .produktinfos a {position:absolute;top:calc(50% - 18px);left:0;width:100%;height:auto;}
.produktliste li .produktinfos a span {color:#fff;}
.produktliste li .produktinfos a > div {display:block;color:#fff;line-height:18px;text-align:center;}
.produktliste li .produktinfos .preis {font-size:14px;}








/* LAYOUT Produkteliste (Isotope eCommerce) */

.produktdetails {margin:0 8% 2em calc(8% - 1em);width:auto;height:auto;}

/* Produktleser */
.produktdetails {position:relative;}
.produktdetails .produktbilder {display:block;vertical-align:middle;width:100%;}
.produktdetails .produktbilder img {display:block;margin:0 auto 2em 2.5em;width:100%;max-width:768px;}
.produktdetails .produktinfos {display:block;width:calc(100% - 2em);max-width:calc(768px - 4em);margin:0 auto;padding:1.5em 1em;background-color:#a46c23;}
.produktdetails .produktinfos .offer {margin-bottom:1em;}
.produktdetails .produktinfos .umfang,
.produktdetails .produktinfos .format,
.produktdetails .produktinfos .artikelnummer {display:block;}
.produktdetails .produktinfos .beschreibung {display:block;margin:1em 0;}

/* Schrift */
.produktdetails h1 {font-family:"UniversNW01-720CdHeavy",sans-serif;font-weight:bold;font-size:17px;color:#000;margin-top:0;margin-bottom:1em;}
.produktdetails div {font-family:"Univers Next W01 Light",Helvetica,sans-serif;font-size:16px;line-height:1.3;}
.produktdetails .umfang,
.produktdetails .artikelnummer,
.produktdetails .format,
.produktdetails .beschreibung {font-size:13px;color:#000000;}
.produktdetails .preis {font-family:"UniversNW01-720CdHeavy",sans-serif;font-weight:normal;margin-top:0;font-size:13px;color:#000000;}
.produktdetails .artikelnummer {margin-top:1em;font-weight:bold;}


@media screen and (min-width:768px) {
	.produktdetails .produktbilder {margin:0 auto 0 0;width:calc(100% - 188px);}
	.produktdetails .produktinfos {position:absolute;top:1.9em;right:0;width:calc(188px - 2em);}
	.produktdetails .produktinfos .umfang,
	.produktdetails .produktinfos .format,
	.produktdetails .produktinfos .artikelnummer {display:block;}
	.produktdetails .produktinfos .artikelnummer {margin-bottom:0;}
	.produktdetails .produktinfos .offer {margin-bottom:2em;}
}

/* Zurueck zur Uebericht */
.back {display:block;margin:0 auto;width:100%;max-width:calc(512px - 2em);text-align:left;}

@media screen and (min-width:768px) {
	.back {margin:0 0 0 auto;width:188px;}
}











/* Footer ///////////////////////////////////////////////////////////////////////////// */
.fusslinks {display:block;position:absolute;right:-85px;bottom:107px;margin:0 auto;width:auto;height:auto;transform:rotate(-90deg);}
.fusslinks h6 {font-size:14px;line-height:24px;font-weight:bold;position:absolute;top:0;left:0;margin:0;}
.fusslinks ul {margin:0 0 0 110px;padding:0;list-style:none;text-align:left;}
.fusslinks ul li {display:block;margin-left:0;}
.fusslinks p {font-family:"serif";font-weight:normal;font-size:14px;}
.fusslinks a {font-family:"serif";font-weight:normal;font-style:italic;font-size:14px;}
.kleingedrucktes .fusslinks a {color:#ddd;}
.fusslinks strong {font-family:"serif";font-weight:bold;font-size:14px;}

/* Responsive Anpassungen */
@media screen and (min-width:768px) {
	/* Randabstaende vergroessern */
	.fusslinks {right:-80px;bottom:127px;}
}
@media screen and (min-width:1280px) {
	/* Randabstaende vergroessern */
	.fusslinks {right:-75px;bottom:147px;}
}