/* Reset default browser settings */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-weight: normal;

}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: none; list-style:none; }
q:before, q:after { content:''; }

/* forces scroll bars so that the main window placement stays the same */
html{
		overflow-y:scroll;
}

/* define color(purple) and size of the links going out */
a{
	color: #660066;
	text-decoration:none;
	font-size: 14px;
}

a:hover{
	color: #FF0000;
}
/* removes dotted outline in Firefox */
a:focus {
     outline: none;
}

.menuItemSelected{
	color: #FF0000;
}
.menuItemSelected a:hover{
	color: #FF0000;
}

.menuItem a:hover {
	color: #FF0000;
}

.menuItem {
	color: #660066
}
.menuItem a:hover {
color: #FF0000;
}
/* more info pop-up link */


#more_info_pop_up{
	 font-size: 12px;
	 color: #FF0000;
}

/* define body */
body {
	font: bold 62.5% Arial, Helvetica, sans-serif;
	margin: 0px;
	background-color: #FFFFFF;
}

/* WRAPPER: wraps entire contents of page */
#wrapper{
	position: relative;
	background-color: #FFFFFF;
	width: 800px;
	margin: 0 auto;
}

/* top banner */
#banner{
	position: absolute;
	left: 26px;
	top: 14px;
}
/* basket_item_no */
#basket_item_no {
	margin-left: 699px;
	margin-top: -33px;
	text-align:center;
}




/* defines main pic */
#main_pic{
	padding-top: 90px;
	margin-bottom: 10px;
}

/* defines agb heading */

#text_agb_head{
	position: absolute;
	left: 55px;
	top: 80px;
	width: 690px;
		
}

/* defines text and the various headings */

#text{
	position: absolute;
	left: 55px;
	top: 80px;
	width: 685px;
	height: 355px;
	padding-right: 10px;
	overflow-y: scroll;	
}

p{
	margin-top: 10px;
	margin-bottom: 8px;
	letter-spacing: 0px;
}

ol{
	margin-left: 12px;
	margin-top: 2px;
	color: #660066;
}
li{
	font-size: 12px;
		margin-bottom: 5px;

}

li p{
	font-size: 14px;
	margin-left: 100px;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

#Anbieterkennzeichnung{
	font-size: 12px;
	margin-left: 100px;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

#Anbieterkennzeichnung a{
	font-size: 12px;
}
/* OBJECT */
h1{
	margin-bottom: 10 px;
	letter-spacing: 0px;
	 color: #FF0000;
}
h1 p{
	 margin-top: 5px;
	 color: #660066;
}

/* DESIGN */
h2{
	 margin-top: 10px;
	letter-spacing: 0px;
	 color: #FF0000;
}

h2 p{
	margin-left: 30px;
	margin-top: 2px;
	font-size: 12px;
	color: #660066;

}

#attention {
  font-weight: bold;
}


/* DESCRIPTION */
h3{
	letter-spacing: 0px;
	color: #FF0000;
	margin-top: 2px;

}
h3 p{
	color: #660066;
	margin-top: 0px;
	margin-bottom: 2px;
}

#description_indent{
	text-indent: 8px;
}

/* prices */
h4{
	letter-spacing: 0px;
	color: #FF0000;
	margin-top: 2px;
}
h4 p{
	color: purple;
}

h4 a{
	font-size: 18px;
}


/* defines the links going out */



ul#mainNav{
		text-align:center;
}


#mainNavContainer li{

}
#mainNav li{
		display: inline;
}

#mainNav li a{
		margin-left: 18px;
		margin-right: 18px;
}



/* defines the bottom banner */

#bottom_banner {
	background: url(../sharedimages/object_nav_img.png);
	background-repeat:repeat-x;
	width: 800px;
	height: 56px;
	margin-top: 10px;
	zoom: 1;
}
/* Simple fix for iPhone Safari scaling issue - works for iPhone 12 mini and iPhone Plus */
/* Add this to your existing CSS - it preserves layout but makes it scale */

/* iPhone SE and very small screens (320px) */
@media only screen and (max-width: 320px) {
    #wrapper {
        transform: scale(0.40); /* 320/800 = 0.40 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        width: 320px;
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone 12 mini and similar (375px) */
@media only screen and (min-width: 321px) and (max-width: 375px) {
    #wrapper {
        transform: scale(0.47); /* 375/800 = 0.47 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        width: 375px;
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Plus sizes (414px - like iPhone 6/7/8 Plus) */
@media only screen and (min-width: 376px) and (max-width: 390px) {
    #wrapper {
        transform: scale(0.52); /* 414/800 = 0.52 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone 14 Pro / iPhone 15 Pro (393px) */
@media only screen and (min-width: 391px) and (max-width: 400px) {
    #wrapper {
        transform: scale(0.48); /* Slightly smaller to prevent cutoff */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Plus sizes (414px - like iPhone 6/7/8 Plus) */
@media only screen and (min-width: 401px) and (max-width: 414px) {
    #wrapper {
        transform: scale(0.52); /* 414/800 = 0.52 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}

/* iPhone Pro Max and larger phones (428px and up to 450px for safety) */
@media only screen and (min-width: 415px) and (max-width: 450px) {
    #wrapper {
        transform: scale(0.535); /* 428/800 = 0.535 */
        transform-origin: top left;
        width: 800px;
        margin: 0;
        position: relative;
        left: 0;
    }
    
    body {
        overflow-x: hidden;
    }
    
    html, body {
        height: auto;
        min-height: 100vh;
    }
}