/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/importer.css #### */
@import url("../fonts/MaterialIcons/materialicons.css");
@import url("../fonts/RobotoCondensed/robotocondensed.css");


/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/common.css #### */
/* CSS Document */

html {
	height:auto;
	box-sizing:border-box;
}

body {
 	box-sizing:border-box;
	font-size:1em;
    padding:0px;
    margin:0px;
	min-height:100%;
	
	font-weight:300;
    line-height:1.5em;
    text-rendering:optimizelegibility;
	color:var(--common-font-color);
	background-color:var(--common-hg-color);
}
body, form * {
	font-family:"Roboto Condensed", Verdana, Arial, sans-serif;
	font-size:1.2em;
}

h1, h2, h3, h4, h5, h6 {
	font-family:"Anton","Roboto Condensed", Verdana, Arial, sans-serif;;
	font-weight:normal;
	line-height:1em;
	margin-top:1em;
	margin-bottom:0.5em;
}
main h1 {
	font-size:4rem;
	line-height:1.2em;
	font-weight:normal;
	text-align:left;
	text-transform:uppercase;
}
main h2 {
	font-size:3rem;
	margin-bottom:0.5em;
	padding-bottom:0.1em;
	border-bottom:none;
    line-height:1em;
}
/*
main h2:first-line {
    font-size:3rem;
    line-height:1.2em;
}
*/

h3, main h3 {
	font-size:1.1em;
}
h4 {
	font-size:1em;
}

main a,
footer a {
    padding:0.2em 0.5em;
    border-radius:0.2em;
    background-color:var(--common-a-background);
    border:1px solid var(--common-a-background);
    transition:background 0.5s, color 0.2s, border-color 0.2s;
}
main a:hover,
footer a:hover {
    border-color:var(--common-a-color-hover);
    background:none;
    color:var(--common-a-color-hover);
}

address {
	font-style:normal;
}

a.std {
    display:inline-block;
    margin-bottom:0.5em;
    background:none;
    padding:0px;
    border:none;
}
a.std:hover {
    text-decoration:underline;
}

/* ---- globale Variablen: ---- */
:root {
	--red:hsl(0,100%,40%);
	
	--common-font-color:#eee;
	--common-font-color-bright:white;
	--common-font-color-lower:#aaa;
	--common-font-color-hover:#666;
	--common-font-color-inverted:#333;
	--common-headline-color1:deepskyblue;
	--common-headline-color2:goldenrod;
	--common-headline-color-engraved:white;
	--common-headline-color-bright:white;
	
	--common-hg-color:black;
	--common-hg-color-lighter:#111;
	--common-hg-color-lighter2:#222;
	--common-hg-color-inverted:#eee;
	
	--common-status-color:#333;
	--common-info-color:#666;
	
	--common-border-color:#666;
	--common-border-color-bright:var(--common-font-color);
	--common-border-color-inverted:#999;
		
	--common-a-color:white;
	--common-a-color-hover:var(--red);
	--common-a-color-inverted:black;
	--common-a-color-inverted-hover:var(--red);
	--common-a-background:rgba(255,255,255,0.1);
    
    --common-ok-color:hsl(120,100%,30%);
    --common-notok-color:hsl(0,100%,30%);
    --common-add-color:hsl(210,100%,56%);
    --common-details-color:hsl(0,0%,80%);
    --common-inverted-color:white;
    --common-inverted-dark-color:hsl(0,0%,20%);
    
    --stdWidth:100rem;
    --font:"Roboto Condensed", Verdana, Arial, sans-serif;
	--font-heading:"Anton","Roboto Condensed", Verdana, Arial, sans-serif;
}


.inverted {
	color:var(--common-font-color-inverted);
	background-color:var(--common-hg-color-inverted);
}

.inverted a {
	color:var(--common-a-color-inverted);
	border-color:var(--common-a-color-inverted);
}
.inverted a:hover {
	color:var(--common-a-color);
	background-color:var(--common-a-color-inverted);
}
/* ENDE globale Variablen: ---- */


/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/content.css #### */
main section{
    padding:4em 0px;
}

/* ---- Login: ---- */
#CLogin .vis {
    display:block;
}
#CLogin form {
    margin-top:1em;
    font-size:0.8rem;
}
#CLogin .fo_verification {
    padding:0px;
}
/* ENDE Login: ---- */


.synegrid h2 {
    padding-bottom:0px;
}
#CUeberUns .synegrid > * {
    margin-bottom:3em;
}

#F0 img {
    max-width:50em;
    margin:2em auto;
}
#F1 address {
    font-size:80%;
    color:var(--common-font-color);
    text-align:center;
    font-style:normal;
}

img.halfheight {
    height:50vh;
    width:100%;
    display:block;
    object-fit: cover;
    object-position: center;
    border-top:1px solid var(--common-border-color);
    border-bottom:1px solid var(--common-border-color);
}

.logos {
	display:flex;
	justify-content:center;
	align-content:center;
	align-items:center;
	flex-wrap:wrap;
}
.logos a {
    display:block;
	margin:0.2rem;
    padding:0px;
    height:auto;
    width:auto;
    border:none;
}
.logos img {
	width:10em;
	height:10em;
	padding:1em;
	background-color:white;
	border:1px solid #666;
	border-radius:0.5em;
	object-fit:contain;
	object-position:center;
}


/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/design.css #### */
.stdWidth {
	max-width:80rem;
	margin:auto;
}
.synegrid {
    --width:80rem;
}


#CLogin {
    background-color:var(--common-a-color-hover);
    color:var(--common-a-color);
    padding:0.5em;
    border-radius:0px 0px 0.2em 0.2em;
    margin-right:1em;
    min-width:10em;
    
    box-shadow:0px 0.5em 0.5em black;
	display:none;
	
}
#CLogin a {
    height:auto;
    font-family:Anton;
}
#CLogin input[type=button]:hover,
#CLogin input[type=submit]:hover,
#CLogin input[type=reset]:hover,
#CLogin button:hover {
	background-color:var(--common-a-color);
	border-color:var(--common-a-color);
}

#CIndex {
    height:100vh;
    display:flex;
    justify-content: center;
    align-content:center;
    align-items: center;
}
#CLogo {
    width:70%;
    height:auto;
}
#CLogo img {
    margin:20%;
    display:block;
    width:60%;
    height:auto;
}
#CUeberUns {
	padding-top:0px;
}

#CMarken {
	background-color:#111;
}


/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/fonts.css #### */



/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/navigation.css #### */
#btnNav {
	margin:auto;
	width:1em;
	height:1em;
	border-radius:0.1em;
	box-sizing:content-box;
	margin-top:0.2em;
	margin-right:0.2em;
	padding:0.3em;
	background-color:var(--red);
	box-shadow:0px 0px 0.5em black;
	
	cursor:pointer;
    display:none;
}

nav ul,
nav li {
    display:block;
    margin:0px;
    padding:0px;
}

nav a {
    display:block;
    width:100%;
    height:100%;
    border-radius:0px;
    text-align:center;
}
nav a:hover {
    cursor:pointer;
}

#nav0,
#H0,
#nav0 ul {
    background: none;
    pointer-events: none;
}
#nav0 li,
#nav0 #CLogin,
#H0 i {
    pointer-events: all;
}

#H0 {
    position:fixed;
    top:0px;
    z-index:1000;
    height:auto;
    left:0px;
    right:0px;
}
#nav0 {
    border-top:2px solid var(--common-a-color-hover);
    height:5em;
    
    display:flex;
    justify-content:center;
    align-content:flex-start;
    align-items:flex-start;
}
#nav0 ul {
    display:flex;
    justify-content:flex-end;
    align-content:stretch;
    align-items:flex-start;
    height:100%;
    padding:0px 1em;
}
#nav0 ul ul {
    display:none;
}
#nav0 > ul {
    font-family:Anton;
}
#nav0 li {
    display:flex;
    justify-content: center;
    align-content:flex-end;
    background-color:var(--common-a-color-hover);
    margin:0px 0.5em;
    padding:0px;
    box-sizing:content-box;
    line-height:1em;
    border-radius:0px 0px 0.2em 0.2em;
    
    box-shadow:0px 0.5em 0.5em black;
}

#nav0 li:hover {
    align-items:flex-end;
    border-bottom:2px solid white;
}
#nav0  a {
    margin:0.5em;
    padding-top:0px;
    color:var(--common-a-color);
    height:auto;
}
#nav0 a:hover {
    transition:padding-top 0.5s;
    padding-top:4em;
}


#nav0 #CMeinBereich a {
    width:auto;
}
#nav0 #CMeinBereich a:hover {
    transition: none;
    padding-top:0px;
    font-weight:bold;
}
#nav0 #CMeinBereich ul ul,
#nav0 #CMeinBereich ul li {
    display:block;
}
#nav0 #CMeinBereich ul ul {
    display:none;
    font-size:1rem;
    margin:0px 0.2em;
}
#nav0 #CMeinBereich li:hover {
    align-items:flex-start;
    border-bottom:none;
}
#nav0 #CMeinBereich > ul > li:hover {
    border-bottom:1px solid white;
    margin-bottom:1em;
}
#nav0 #CMeinBereich li:hover > ul {
    border-top:1px solid white;
    display:block;
}

#nav0 #CMeinBereich ul ul li {
    font-family:"Roboto Condensed",sans-serif;
    box-shadow:none;
    width:100%;
    margin:0.2em 0px;
}

/*
#nav0 #CMeinBereich {
    height:100%;
}
#nav0 #CMeinBereich ul,
#nav0 #CMeinBereich li {
    display:block;
    margin:0px;
    padding:0px;
    height:auto;
    width:auto;
    overflow:visible;
}
#nav0 #CMeinBereich li {
}
#nav0 #CMeinBereich ul ul {
    display:none;
}
*/

/* ---- Nebennavi: ---- */
#nav2 {
    padding:1em 0px;
    background-color:#333;
    border-top:1px solid #666;
    border-bottom:1px solid #666;
}
#nav2 ul {
    display:flex;
    justify-content:center;
    align-content:stretch;
    align-items:center;
}
#nav2 li {
    margin:0px 0.5em;
}

#nav2 a {
    padding:0.2em 1em;
    border-bottom:2px solid rgba(255,255,255,0);
    transition:border-color 1s, font-weight 0.5s;
    border-radius:0px;
}
#nav2 a:hover {
    font-weight:bold;
    color:var(--common-a-color-hover);
    border-color:var(--common-a-color-hover);
}
/* ENDE Nebennavi: ---- */


/* #### ../../../../frontend/kunden/rocket-raceparts.at/css/form.css #### */
form {
	--border-color:#ccc;
}

form * {
	font-size:inherit;
}

label {
	display:block;
	margin-top:0.5em;
	margin-bottom:0.1em;
	line-height:1em;
}
input,
textarea,
select,
button {
	display:block;
	width:100%;
	border:1px solid var(--border-color);
	padding:0.5rem 1rem;
	border-radius:0.2rem;
	line-height:1rem;
	box-sizing:border-box;
	margin-bottom:0.2rem;
	background-color:rgba(255,255,255,0.8);
}
::placeholder {
	padding-top:1rem;
	font-size:0.7em;
}
/*
::placeholder:focus,
select:focus {
	font-size:inherit;
	padding-top:0.5rem;
	line-height:inherit;
}
*/
form :focus {
	background-color:white;
}

input[type=date],
input[type=time] {
	width:auto;
}
input[type=number] {
	min-width:8em;
	text-align:right;
}

textarea {
	min-height:15em;
}

input[type=checkbox],
input[type=radio] {
	display:inline-block;
}

fieldset {
	padding:1em;
	margin-top:2em;
	border-radius:0.5em;
	border:1px solid var(--hg_content);
}

form p {
	line-height:1.2em;
}

legend {
	font-weight:bold;
	font-size:1.1em;
	background-color:white;
	padding:0.2em 0.5em;
	border-radius:0.5em;
	border:1px solid var(--hg_content);
}

label[required]::after,
label[data-required]::after {
	content: "*";
}
.req {
	margin:0.5em 0px;
	font-size:1rem;
	font-weight:bold;
	font-style:italic;
}

input[type=button],
input[type=submit],
input[type=reset],
button {
	margin:1em auto;
	width:auto;
	cursor:pointer;
	border:1px solid var(--common-a-color);
	background-color:rgba(255,255,255,0);
	color:var(--common-a-color);
	transition:border-color 0.5s, color 0.2s;
}
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
button:hover {
	border-color:var(--common-a-color-hover);
	color:var(--common-a-color-hover);
}


/* #### not existing or no file: ../../../../ #### */


/* #### ../../../../frontend/css/shop/fo_shop_common.css #### */
#SYNEShop {
}

.syneshop {
	/*
	--width:var(--stdWidth);
	*/
	--width:var(--stdWidth);
	margin-top:5em;
    margin-left:max(calc((100vw - var(--width)) / 2),1em);
    margin-right:max(calc((100vw - var(--width)) / 2),1em);
    max-width:var(--width);
}
#SYNEShop {
	--common-border-color:inherit;
    --common-add-color:inherit;
	--common-ok-color:inherit;
    --common-notok-color:inherit;
    --common-details-color:inherit;
    --common-inverted-color:inherit;
    --common-inverted-dark-color:inherit;
	--common-font-color-lower:inherit;
	--common-font-color-bright:inherit;
	--common-hg-color-lighter:inherit;
    --rabatt-hg-color:hsl(39,100%,50%);
    --rabatt-font-color:white;
    
    --font:inherit;
    --font-heading:inherit;
    
	/*
	--width:var(--stdWidth);
	max-width:var(--width);
	*/
	margin:auto;
	
	display:grid;
	grid-template-columns:18em 1fr;
	grid-template-areas:
		"nav nav"
		"kats prod";
	grid-gap: 1em;
	
	margin-top:0em;
}

.mtop4 {
	margin-top:4rem;
}
.syneshop button,
.syneshop input[type=button],
.syneshop input[type=submit] {
    transition:background-color 0.2s, color 0.5s;
}

.syneshop .btnAdd,
.syneshop .btnWarenkorb {
    color:var(--common-add-color);
    border:1px solid var(--common-add-color);
}
.syneshop .btnAdd:hover,
.syneshop .btnWarenkorb:hover {
    color:var(--common-inverted-color);
    background-color:var(--common-add-color);
}
.syneshop .btnDetails {
}
.syneshop .btnDetails,
.syneshop .btnEdit {
    color:var(--common-details-color);
    border:1px solid var(--common-details-color);
}
.syneshop .btnDetails:hover,
.syneshop .btnEdit:hover {
    color:var(--common-inverted-dark-color);
    background-color:var(--common-details-color);
}
.syneshop .btnKassa {
	color:var(--common-inverted-color);
    background-color:var(--common-add-color);
    border:1px solid var(--common-add-color);
}
.syneshop .btnKassa:hover {
    color:var(--common-add-color);
    background-color:var(--common-inverted-color);
}
.syneshop .btnDel {
	color:var(--common-inverted-color);
    background-color:var(--common-notok-color);
    border:1px solid var(--common-notok-color);
}
.syneshop .btnDel:hover {
    color:var(--common-notok-color);
    background-color:var(--common-inverted-color);
}
.syneshop .btnOk {
	color:var(--common-inverted-color);
    /*background-color:var(--common-ok-color);*/
    border:1px solid var(--common-ok-color);
}
.syneshop .btnOk:hover {
    color:var(--common-ok-color);
    background-color:var(--common-inverted-color);
}


.syneshop .versand .btnDetails {
    display:none;
}


#SYNEShop_Produktgruppen {
	grid-area:kats;
}
#SYNEShop_Produktgruppen ul ul.H3 {
	display:none;
}
#SYNEShop_Produktgruppen ul ul.V3 {
	display:block;
}
#SYNEShop_Produkt {
	grid-area:prod;
}
#SYNEShop_Navigation {
	grid-area:nav;
	display:flex;
	justify-content: flex-end;
	align-items:center;
	padding:1em 0px;
	padding-top:4em;
	margin-top:-4em;
	border-bottom:2px solid var(--common-border-color);
	
	background-color:var(--common-hg-color);
	position:sticky;
	top:0em;
	left:0px;
	right:0px;
	height:auto;
	z-index:2;
	box-shadow:0px 0px 1em var(--common-hg-color);
}
#SYNEShop_Navigation > * {
	flex-grow:0;
	margin:0px 0.5em;
}
#SYNEShop_Navigation > :last-child,
#SYNEShop_Navigation .wk_kassa> :last-child {
	margin-right:0px;
}

#SYNEShop_Navigation .wk_kassa button {
	margin:0px 0.5em;
	display:inline-block;
}
#SYNEShop_Produktgruppen .material-icons {
    font-size:1em;
    vertical-align:middle;
    width:1em;
    display:inline-block;
}
#SYNEShop_Produktgruppen ul,
#SYNEShop_Produktgruppen li {
    display:block;
    margin:0px;
    padding:0px;
}
#SYNEShop_Produktgruppen > ul,
#SYNEShop_Produktgruppen > nav > ul {
    padding:0.5em;
    border-radius:0.2em;
    background-color:rgba(255,255,255,0.1);
    margin-bottom:0.5em;
}
#SYNEShop_Produktgruppen ul ul {
    /* wird über die H3-/V3-Klasse erledigt
	display:none;
	*/
    margin-left:1em;
    font-size:0.95em;
}
#SYNEShop_Produktgruppen > ul.news,
#SYNEShop_Produktgruppen > nav > ul.news {
    border:1px solid var(--red);
    color:var(--red);
    font-weight:bold;
}

#SYNEShop_Produktgruppen li {
    padding:0.2em 0px;
}
#SYNEShop_Produktgruppen li.active {
	font-weight:bold;
	color:var(--common-font-color-bright);
}

#SYNEShop_Produktgruppen li.active ul {
	font-weight:normal;
	color:var(--common-font-color);
}

	
#SYNEShop h3 {
	font-size:1.2rem;
	line-height:1.2em;
	margin-top:1em;
	margin-bottom:0.5em;
}
#SYNEShop section {
	padding:0px;
}

#SYNEShop label input {
    width:auto;
    display:inline-block;
    margin-right:0.5em;
}


/* ---- Navigation: ---- */
#SYNEShop .btnWarenkorb .anz {
	font-size:80%;
	position:absolute;
	right:-0.75em;
	top:-0.75em;
	width:1em;
	height:1em;
	border-radius:50%;
	z-index:1;
	
	box-sizing:content-box;
	padding:0.25em;
	background-color:var(--common-add-color);
	color:var(--common-inverted-color);
}
	
/* ENDE Navigation: ---- */

/* ---- Produktliste: ---- */
.shop_flexbox {
	margin:0px;
	padding:0px;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
	flex-wrap:wrap;
	gap:0.5em;
}
.shop_flexbox.produkte li {
	margin:0px;
	flex-grow:0;
	flex-shrink:0;
	align-self:stretch;
	width:20em;
	border-radius:0.5em;
	padding:0.5em;
	border:1px solid var(--common-border-color);
    min-height:100%;
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:max-content minmax(5em,max-content) max-content 1fr max-content max-content;
    justify-content: center;
    align-content: stretch;
}

.shop_flexbox.produkte li figure {
	overflow:hidden;
}
.shop_flexbox.produkte li figure form {
    width:100%;
}

.shop_flexbox.produkte li h2 {
	font-family:var(--font);
	margin:0.2em 0px;
	font-size:1.3em;
	line-height:1.2em;
}
.shop_flexbox.produkte li h2:first-line {
	font-size:70%;
	line-height:1.1em;
}
.lieferzeit {
    font-size:0.8em;
    margin:0.2em 0px;
    color:var(--common-font-color-lower);
    text-align:right;
    line-height:1.2em;
}
.shop_flexbox.produkte li .lieferzeit {
    border-bottom: 1px dotted var(--common-font-color-lower);
    margin-top:0px;
    margin-bottom:1em;
    text-align:center;
    padding:0px 0.5em 0.2em 0.5em;
}
.shop_flexbox.produkte li img {
	/*
    max-width:100%;
	object-fit:cover;
    */
    width:100%;
	/*
    height:20em;
    */
    aspect-ratio: 1 / 1;
	object-fit:contain;
	object-position:center;
    background-color: white;
}
.produkte .warenkorb,
.produkt .warenkorb > .add {
    margin-top:1em;
    border-top:1px solid var(--common-border-color);
    padding-top:0.5em;
    display:flex;
    justify-content:flex-end;
}
.produkte .warenkorb > *,
.produkt .warenkorb > .add > * {
    flex-grow:0;
    flex-shrink:0;
    margin:0px;
    gap:0.5em;
}
.produkte .warenkorb > input,
.produkt .warenkorb > .add > input {
    min-width:0px;
    width:4em;
    margin-right:0.5em;
}
.produkte .warenkorb > button,
.produkt .warenkorb > .add > button {
}
.produkte figcaption {
    margin-top:0.2em;
    margin-bottom:0.5em;
    color:var(--common-font-color-lower);
}

.syneshop .anzmin {
    font-size:90%;
    line-height:1.2em;
    font-style:italic;
    margin-bottom:0px;
}
.syneshow .wk_grid .anzmin {
    grid-column:span 3;
}
/*
.produkte .preis,
.produkt .preis {
    font-size:0.8em;
    text-align:right;
}
.produkte .preis:first-line,
.produkt .preis:first-line {
    font-size:1.5em;
}
.PreisAlt {
    text-decoration: line-through;
    color:var(--common-font-color-lower);
    margin-right:0.5em;
}
*/

.preis > * {
	text-align:right;
}
.UVP {
    color:var(--common-font-color-lower);
}
.UVP > *,
.Rabatt > *,
.PreisAktuell > *,
.USt > *,
.EP > *,
.EHP > * {
	display:inline-block;
}

.UVP label,
.Rabatt label,
.PreisAktuell label,
.USt label,
.EP label,
.EHP label {
	font-size:1rem;
}
.EP {
	border-top:1px dashed var(--common-font-color-lower);
}
.UPreis {
    display:none;
}

.PreisAktuell output {
	font-size:1.5rem;
}

.UVP > output {
	text-decoration: line-through;
}


.produkte figure .rabatt,
.produkt header .rabatt {
    --size:4.5rem;
    color:var(--rabatt-font-color);
    font-size:0.8em;
    font-weight:700;
    position:absolute;
    right:0px;
    top:0px;
    width:calc(var(--size) / 1.414);
    height:var(--size);
    z-index:2;
    /*
	padding-top:0.5em;
	*/
    padding-right:0.2em;
    text-align:right;
	line-height:1em;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	align-content:center;
}
.produkte figure .rabatt .hg,
.produkt header .rabatt .hg {
    position:absolute;
    z-index:-1;
    border:var(--size) solid var(--rabatt-hg-color);
    border-bottom-color:transparent;
    border-right-color:transparent;
    border-top-color:transparent;
    transform:rotate(-45deg);
    width:0;
    height:0;
    right:calc(-1 * var(--size));
    top:calc(-1 * var(--size));
}
/* ENDE Produktliste: ---- */

/* ---- Produkt: ---- */
.produkt {
    display:grid;
    grid-template-columns:1fr minmax(15em,auto);
    grid-template-areas:
        "header header"
        "galerie galerie"
        "beschreibung order"
		"footer footer";
    grid-gap: 1em;
	margin-bottom:1em;
	padding-bottom:3em;
}
.produkt header {
    grid-area:header;
    overflow:hidden;
}
.produkt footer {
	grid-area:footer;
	font-size:0.9rem;
	color:var(--common-font-color-lower);
}
.produkt footer .gpsr {
	border-top:1px solid var(--common-border-color);
	padding-top:0.2em;
}
.produkt footer .gpsr dt,
.produkt footer .gpsr dd {
	margin-bottom:0;
	line-height:1.2;
}
.produkt .galerie {
    grid-area:galerie;
	max-width:100%;
	overflow-x:auto;
}
.produkt .galerie figure {
    min-height:100%;
	flex-shrink: 0;
}
.produkt .galerie figure a {
	width:100%;
	height:100%;
	background-color:white;
}
.produkt .galerie picture {
	height:100%;
	text-align:center;
}
.produkt .galerie picture img {
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
}

.produkt .beschreibung {
    grid-area:beschreibung;
}
.produkt .order {
    grid-area:order;
    position:sticky;
    top:0px;
    right:0px;
    z-index:1;
}

.produkt header img {
    object-fit:cover;
    object-position:center;
    width:100%;
    height:20em;
}
.produkt h1 {
    font-size:2rem;
}
.produkt h1:first-line {
    font-size:1.2rem;
    font-family:var(--font);
}

.varianten label {
    border:1px solid var(--common-border-color);
    border-radius:0.5em;
    padding:0.5em;
    display:block;
    margin-bottom:0.5em;
}
.varianten label:nth-of-type(even) {
    background-color:rgba(255,255,255,0.1);
}
.varianten label:nth-of-type(odd) {
    background-color:rgba(255,255,255,0.2);
}

.varianten label.produktvariante_wert {
    display:grid;
    grid-template-columns:1em 1fr 6em;
    grid-column-gap: 0.5em;
	align-items:start;
}
.varianten label.produktvariante_wert > .lieferzeit {
    grid-column: span 3;
}
.preise .preis,
.preise .aufpreis {
    text-align:right;
    font-size:80%;
    line-height:1.2em;
}
.preise .aufpreis {
	margin-bottom:0.5em;
}
.preise .preis.orig {
	text-decoration: line-through;
}

.lightbox {
    justify-content:flex-start;
    padding:0.2em;
    border-top:1px solid var(--common-border-color);
    border-bottom:1px solid var(--common-border-color);
    background-color:var(--common-hg-color-lighter);
}
.lightbox figure {
    width:10em;
    height:10em;
    object-fit:cover;
    object-position: center;
    margin:1px;
}
.lightbox figure a {
    display:block;
}
/* ENDE Produkt: ---- */


/* ---- Warenkorb: ---- */
.label {
    font-size:90%;
    margin:0px;
}
.label.right {
    text-align:right;
}

.wk_grid {
    padding:0.5em 0px;
    display:grid;
    grid-template-columns:12em 1fr 10em;
    grid-template-rows:1fr 4em;
    grid-template-areas:
        "pic beschreibung preis"
        "pic nav preis";
    grid-gap:1.5em;
    border-top:1px solid var(--common-border-color);
}
.wk_grid.versand {
    grid-template-rows:auto auto;
    border-top-style:dotted;
    margin-top:2em;
    grid-row-gap:0.5em;
}
.wk_grid.versand figure,
.wk_grid.versand .menge {
    display:none;
}
.gespreis {
    padding-top:1em;
    border-top:1px solid var(--common-border-color);
}
.wk_grid > .figure {
    grid-area:pic;
}
.wk_grid > .beschreibung {
    grid-area:beschreibung;
    font-size:0.8em;
    line-height:1.2em;
}
.wk_grid > .preis_outer {
    grid-area:preis;
    align-self:end;
}
.wk_grid > .nav {
    grid-area:nav;
    display:flex;
    justify-content:flex-start;
    align-content:flex-end;
    align-items:flex-end;
}

.wk_grid > .figure img {
    width:12em;
    height:12em;
    object-fit:contain;
    object-position:center;
}
.wk_grid > .figure figcaption {
    margin-top:0.2em;
}
.wk_grid > .nav > * {
    margin:0px;
    margin-right:0.5em;
}
.wk_grid > .nav > :last-child {
	margin-right:0px;
}

.wk_grid > .nav input {
    margin-top:0.2em;
    margin-bottom:0px;
}
#SYNEShop .wk_grid > .nav input {
	margin-right:0px;
}

.wk_grid h2 {
    font-family:var(--font);
    font-weight:bold;
    font-size:1.5rem;
    line-height:1.5rem;
    margin-bottom:0.5em;
}
.wk_grid h2:first-line {
    font-size:1.5rem;
}
.wk_grid .menge {
    font-size:80%;
}
.wk_grid .preis_outer ul,
.wk_grid .preis_outer li {
    margin:0px;
    padding:0px;
    display:block;
    color:var(--common-font-color-lower);
}
.wk_grid .preis_outer ul {
    margin-bottom:1em;
    padding-bottom:0.2em;
    border-bottom:1px dashed var(--common-font-color-lower);
}

.wk_grid .preis_outer li {
    font-size:80%;
    line-height:1em;
    margin-bottom:0.2em;
    text-align:right;
}
.wk_grid .preis_outer li .var {
    text-transform: uppercase;
    font-weight:bold;
}
#Shop_Warenkorb .inkl {
    font-size:1.5rem;
    font-weight:bold;
}
#Shop_Warenkorb .inkl .smaller {
    font-size:1.2rem;
    font-weight:normal;
}
#Shop_Warenkorb .btnKassa {
    margin:1em 0px 1em auto;
}
/* ENDE Warenkorb: ---- */


/* ---- Kassa: ---- */
.syneshop .error {
	background-color:var(--common-notok-color);
	color:var(--common-font-color);
	text-align:center;
	font-style:italic;
	padding:1em;
	border-radius:0.5em;
	width:70%;
	margin:2em auto;
}

#SYNEShop .kassa_std {
    grid-column:span 2;
}
.syneshop .kassa_std .btnDetails {
	display:none;
}
#SYNEShop #CLoginRegister {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:repeat(3,auto);
    align-items:start;
	grid-gap:1.5em;
	grid-auto-flow:column;
}
#SYNEShop #CLoginRegister h2 {
	margin-top:0px;
}
#SYNEShop #CLoginRegister {
	padding:0px;
}
#SYNEShop #CLoginRegister .fo_verification {
	margin:0px;
    margin-top:0px;
	padding:0px;
}

#SYNEShop .fo_verification fieldset {
    padding:0em;
}
#SYNEShop .fo_verification fieldset.required {
    font-size:1em;
	border:1px solid #333;
	border-radius:0.2em;
	padding:1em;
}
#CLoginRegister input[type=submit],
#CLoginRegister button {
	color:var(--common-ok-color);
	border-color:var(--common-ok-color);
}
#CLoginRegister input[type=submit]:hover,
#CLoginRegister button:hover {
	color:var(--common-inverted-color);
	background-color:var(--common-ok-color);
}

#SYNEShop form {
	max-width:30em;
	margin:auto;
}
#SYNEShop #frmAdresse {
	border:1px solid var(--common-border-color);
	padding:1em;
	border-radius:0.2em;
	display:none;
}

#SYNEShop .adresstypen {
	margin:1em 0px;
	padding:1em;
	border-radius:0.2em;
	background-color:var(--common-hg-color-lighter);
}
#SYNEShop .kassa .adresstypen button {
    display:none;
}
#SYNEShop .heading {
	font-weight:bold;
}
#SYNEShop #navKassa {
	margin-bottom:2em;
}
#SYNEShop #navKassa ul,
#SYNEShop #navKassa li {
	margin:0px;
	padding:0px;
	display:block;
}
#SYNEShop #navKassa ul {
	display:flex;
	justify-content:flex-start;
	align-content:center;
	align-items:center;
}
#SYNEShop #navKassa .material-icons {
	vertical-align:middle;
}
#SYNEShop #navKassa a {
	display:inline-block;
	margin:0px 0.5em;
	width:auto;
	background:none;
	border-radius:0.2em;
    text-decoration:none;
}
#SYNEShop #navKassa a:first-of-type {
	margin-left:0px;
}
#SYNEShop #navKassa .step {
	width:1.4em;
	height:1.4em;
	font-size:80%;
	padding:0.2em;
	box-sizing:content-box;
	display:inline-block;
	border-radius:50%;
}
#SYNEShop #navKassa a.done {
	color:var(--common-ok-color);
	border-color:var(--common-ok-color);
}
#SYNEShop #navKassa a.done:hover {
	background-color:var(--common-ok-color);
	color:var(--common-inverted-color);
}
#SYNEShop #navKassa a.done .step {
	color:var(--common-inverted-color);
	background-color:var(--common-ok-color);
}

#SYNEShop #navKassa a.aktiv {
	color:var(--common-add-color);
	border-color:var(--common-add-color);
}
#SYNEShop #navKassa a.aktiv:hover {
	background-color:var(--common-add-color);
	color:var(--common-inverted-color);
}
#SYNEShop #navKassa a.aktiv .step {
	color:var(--common-inverted-color);
	background-color:var(--common-add-color);
}

#SYNEShop .bordering,
#SYNEShop .bordering > li {
	margin:0px;
	padding:0px;
	display:block;
}

#SYNEShop section.bordering {
	margin-top:1em;
}
#SYNEShop .bordering > li,
#SYNEShop section.bordering {
    border:1px solid var(--common-border-color);
    border-radius:0.2em;
    padding:1em;
    margin-bottom:0.5em;
}
#SYNEShop .bordering > li:hover {
    background-color:var(--common-hg-color-lighter);
}
#SYNEShop .bordering > li {
}

#SYNEShop .bordering > li label {
    display:grid;
    grid-template-columns:auto 1fr minmax(3em,6em); 
    grid-gap:1em;
}
#SYNEShop .bordering > li label > :first-child {
    grid-rows:span 2;
}
#SYNEShop .bordering label ul,
#SYNEShop .bordering label li {
    display:block;
    margin:0px;
    padding:0px;
}
#SYNEShop .bordering .paketdienst {
    margin-bottom:0.2em;
}
#SYNEShop .bordering .lieferzeit {
}

.syneshop .bordering .beschreibung {
    font-style:italic;
    grid-column:2;
    font-size:90%;
}
.syneshop .bordering .preis {
    grid-row:span 2;
	text-align:right;
	font-size:1.2rem;
}
.syneshop .bordering .preis.add {
	color:var(--common-notok-color);
}
.syneshop .bordering .preis.subtract {
	color:var(--common-ok-color);
}

#SYNEShop .kundendaten .adressen {
    margin:1em 0px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

#SYNEShop .versandart {
    font-weight:bold;
    margin-top:0.8em;
    margin-bottom:0.2em;
}

#SYNEShop .kundendaten address {
    margin-right: 1em;
    border:1px solid var(--common-border-color);
    border-radius:0.2em;
    padding:1em;
    
    background-color:var(--common-hg-color-lighter);
}

.syneshop .versandkostenfrei {
	font-size:80%;
	text-transform: uppercase;
	font-weight:normal;
	border:1px solid var(--common-ok-color);
	padding:0.2em 1em;
	background-color:var(--common-ok-color);
	color:var(-common-font-color);
	border-radius:0.2em;
}
/* ENDE Kassa: ---- */

/* ---- Bestellungen: ---- */
.syneshop .bestellungen {
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
    line-height:1.2em;
}
.syneshop .bestellungen > thead {
    border-bottom:2px solid var(--common-border-color);
}
.syneshop .bestellungen > tbody tr:first-of-type td {
    padding-top:1em;
}
.syneshop .bestellungen > tbody :not(tr:last-of-type) td {
    border-bottom:1px dotted var(--common-border-color);
}
.syneshop .bestellungen th,
.syneshop .bestellungen td {
    padding:0.2em 0.5em;
    vertical-align:top;
}
.syneshop .bestellungen :not(.produkte) {
    /*
    width: 1px;
    white-space: nowrap;
    */
}
.syneshop .bestellungen h2 {
    font-family:var(--font);
    font-size:1.2rem;
    margin:0px;
    line-height:1.2em;
}
.syneshop .bestellungen .be_grid {
    display:grid;
    grid-template-columns:6em 2fr 1fr;
    grid-gap:1em;
    margin-bottom:0.5em;
}
.syneshop .bestellungen figcaption,
.syneshop .bestellungen .btnDetails {
    display:none;
}
.syneshop .bestellungen figure img {
    width:5em;
    height:5em;
    max-width:none;
    object-fit:contain;
}
.syneshop .bestellungen .preis_outer ul,
.syneshop .bestellungen .preis_outer li {
    display:block;
    margin:0px;
    padding:0px;
    color:var(--common-font-color-lower);
}
.syneshop .bestellungen .preis_outer li {
    font-size:90%;
    line-height:1.2em;
    margin-bottom:0.2em;
}
.syneshop .bestellungen .preis_outer li .var,
.syneshop .bestellungen .preis_outer li .wert {
    display:inline;
    margin-right:0.5em;
}
.syneshop .bestellungen address {
    line-height:1.2em;
    margin-bottom:0.5em;
}
.syneshop .bestellungen .ust,
.syneshop .bestellungen .datum{
	font-size:90%;
	line-height:1.2em;
    white-space: nowrap;
}
.syneshop .bestellungen .gesamt {
	font-weight:bold;
}
.syneshop .bestellungen .preis span {
	display:block;
    white-space: nowrap;
}
.syneshop .bestellungen .preis > * {
	margin-bottom:0.5em;
}
.syneshop .bestellungen .preis > * > :first-child {
	font-weight:bold;
	text-transform: uppercase;
}
.syneshop .bestellungen .preis > :not(.gesamt) {
    color:var(--common-font-color-lower);
	font-size:90%;
}

.syneshop .bestellungen a[download] {
    display:block;
    margin:auto;
    width:1em;
    box-sizing:content-box;
}
/* ENDE Bestellungen: ---- */

/* ---- Tabs: ---- */
.tabs {
	position:relative;
	min-height:10em;
	overflow:visible;
}

.tabs article {
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	height:auto;
	min-height:100%;
}

.tabs article header {
	width:15em;
}

.tabs article:nth-of-type(n) header {
	margin-left:calc(n * 15em);
}
/* ENDE Tabs: ---- */

/* ---- Produkttests: ---- */
#CProdukttests article {
	border-radius:0.2em;
	padding:0.5em;
	background-color:var(--common-hg-color-lighter2);
	margin-bottom:1em;
}
#CProdukttests article h1 {
	font-size:1.8rem;
	line-height:1;
	margin-bottom:0.8rem;
	margin-top:0px;
}
#CProdukttests article h2 {
	font-size:1.5rem;
	line-height:1;
	margin-bottom:0.5rem;
	margin-top:0.2rem;
}
#CProdukttests article header {
	display:grid;
	grid-template-columns:1fr minmax(0px,auto);
	grid-template-areas:
		"Titel Datum"
		"Teaser Produkte";
	gap:0.5em;
	margin-bottom:1em;
}
#CProdukttests article header h1 {
	grid-area:Titel;
}
#CProdukttests article header .teaser {
	grid-area:Teaser;
	font-size:1.1em;
	line-height:1.5;
	color:var(--common-font-color-lower);
	font-weight:normal;
}
#CProdukttests article header figure {
	grid-area:Produkte;
	border-left:2px solid var(--common-border-color);
	padding:0.2em;
}
#CProdukttests article header figure a {
	font-size:0.8rem;
	line-height:1.2;
}
#CProdukttests article header figcaption {
	margin-bottom:0.8em;
	text-align:left;
}
#CProdukttests article header .datum {
	grid-area:Datum;
	text-align:right;
	font-size:0.8rem;
	color:var(--common-font-color-lower);
}
#CProdukttests article header figure ul,
#CProdukttests article header figure li {
	display:block;
	margin-left:0px;
}
#CProdukttests article header figure li {
	margin-bottom:0.5em;
}
/* ENDE Produkttests: ---- */



/* #### ../../../../frontend/css/shop/fo_shop_forms.css #### */
form.fo_frm_small {
    max-width:30em;
    margin:auto;
    padding:1em;
}

form.fo_frm_small fieldset {
    font-size: inherit;
    margin-top: 0px;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1em;
}

form.fo_frm_small legend {
    font-weight: normal;
    text-transform:uppercase;
    font-size: 1.1em;
    background:none;
    padding:0.2em 0px;
    border-radius:0px;
    border: none;
    width:100%;
    box-sizing:border-box;
    display:flex;
}
form.fo_frm_small legend > * {
    flex-grow:1;
    align-self:center;
}
form.fo_frm_small legend > :last-child {
    flex-grow:0;
    flex-shrink:1;
    text-align_right;
}
form.fo_frm_small legend button {
    display:inline-block;
    margin:0px 0px 0px auto;
}

/* ---- Suchformular: ---- */
.syneshop #SYNEShop .suche {
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    align-content:stretch;
    margin-bottom:1em;
}
.syneshop #frmSuche > * {
    min-height:100%;
}
.syneshop .suche > * {
    flex-grow:1;
    flex-shrink:0;
    width:auto;
    padding:0.5em 1em;
    margin:0px;
    margin-right:0.5em;
}
.syneshop .suche button {
    width:1em;
    box-sizing:content-box;
    margin-right:0px;
	flex-grow:0;
}
.syneshop .suche button {
}

.syneshop .navigator {
	font-size:0.9em;
}
.syneshop .navigator .elements > *,
.syneshop .navigator select {
	padding:0.2em 0.5em;
	font-size:1rem;
	line-height:1em;
	margin:1px;
	flex-grow:0;
	flex-shrink:0;
}
.syneshop #SYNEShop .navigator {
	margin-bottom:0px;
	justify-content:flex-end;
	margin-right:2em;
}
.syneshop .navigator .text {
	display:flex;
	align-content:center;
	align-items:center;
}
.syneshop .navigator .elements {
	display:flex;
	align-content:stretch;
	align-items:stretch;
	padding:0px;
}
/* ENDE Suchformular: ---- */


/* #### ../../../../frontend/css/shop/fo_shop_profil.css #### */
.syneshop .adressen ul,
.syneshop .adressen li {
    margin:0px;
    padding:0px;
    display:block;
}

.syneshop .adressen button {
    margin:0px;
    margin-right:0.5em;
}

.syneshop .adressen li {
    margin-bottom:0.2em;
}

.syneshop .adressen input[type=radio] {
    display:none;
}
.syneshop .adressen label {
    display:inline;
}

#CProfil section {
    padding:0px;
}




/* #### ../../../../frontend/css/shop/fo_shop_responsive.css #### */
@media screen and (min-width:48em) {
	nav.responsive {
		display:block;
	}
	button.responsive {
		display:none;
	}
}

@media screen and (max-width:48em) {
	#SYNEShop {
		grid-template-columns:100%;
		grid-template-areas:
			"nav"
			"kats"
			"prod";
	}
	#SYNEShop_Navigation {
		flex-direction: column;
		justify-content: flex-start;
	}
	#SYNEShop_Navigation > * {
		margin:0.5em 0px;
	}

	/* ---- Navigation: ---- */
	#btnNav {
		display:block;
	}
	#nav0 {
		display:none;
		margin-top:0.5em;
		height:auto;
		box-shadow:0px 0px 1em black;
	}
	#nav0 ul {
		margin:0px 1em;
		background-color:var(--red);
		display:block;
		height:auto;
	}
	#nav0 li {
		background:none;
		box-shadow:none;
	}
	#nav0 :not(#CLogin) a:hover {
		transition:none;
		padding-top:0px;
	}
	
	#CMeinBereich {
		border-top:1px solid white;
		padding:0.5em 0px;
		border-radius:0px 0px 0.5em 0.5em;
		background-color:var(--red);
		margin:0px 1em;
	}
	#CMeinBereich .H3 {
		display:block;
	}
	#nav0 #CMeinBereich ul ul {
		display: block;
	}
	/* ENDE Navigation: ---- */
	
	
	/* ---- Produkt: ---- */
	.shop_flexbox.produkte li {
		width:auto;
		max-width:100%;
	}

	.produkt {
		grid-template-columns:1fr;
		grid-template-areas:
			"header"
			"galerie"
			"beschreibung"
			"order"
			"footer";
	}
	/* ENDE Produkt: ---- */
	
	
	/* ---- Kassa: ---- */
	#SYNEShop #navKassa ul {
		flex-direction: column;
	}
	#SYNEShop #navKassa li {
		width:100%;
		margin-bottom:0.2em;
		display:grid;
		grid-template-columns:1fr 2em;
	}
	#SYNEShop .kundendaten .adressen {
		flex-direction: column;
	}
	#SYNEShop .kundendaten address {
		margin-right:0px;
		margin:auto;
		margin-bottom:0.2em;
		width:100%;
	}
	
	.wk_grid {
		grid-template-columns:100%;
		grid-template-rows:auto;
		grid-template-areas:
			"pic"
			"beschreibung"
			"nav"
			"preis";
	}
	
	.kassa_std label {
		line-height:1.2em;
	}
	/* ENDE Kassa: ---- */
	
	
	/* ---- Bestellungen: ---- */
	/*
	.syneshop .bestellungen {
		display:block;
	}
	.syneshop .bestellungen tr {
		display:grid;
		grid-template-colums:10em 1fr;
	}
	.syneshop .bestellungen tr:nth-of-type(5n-4) {
		grid-column:span 2;
	}
	.syneshop .bestellungen tr:nth-of-type(5n-3) {
		grid-column:span 2;
	}
	.syneshop .bestellungen tr
	*/
	.syneshop .bestellungen,
	.syneshop .bestellungen tr,
	.syneshop .bestellungen td {
		display:block;
	}
	.syneshop .bestellungen thead {
		display:none;
	}
	.syneshop .bestellungen .reno {
		display:flex;
		justify-content: flex-start;
		align-items:center;
	}
	/* ENDE Bestellungen: ---- */
	#SYNEShop_Navigation {
		height:auto;
		padding-top:0.2em;
	}
	.syneshop #SYNEShop .navigator {
		flex-direction:column;
		margin-right:auto;
		margin-bottom:0.2em;
	}
	.syneshop .navigator .elements {
		margin-right:auto;
	}
	.syneshop .navigator .elements button,
	.syneshop .navigator .elements select {
		padding:0.2em 0.5em;
		line-height:0.8em;
	}
	#SYNEShop_Navigation .wk_kassa button .beschriftung {
		display:none;
	}
	
	nav.responsive {
		display:none;
	}
	button.responsive {
		display:block;
	}
	
	#SYNEShop_Produktgruppen {
		position:sticky;
		top:6em;
		z-index:900;
		background-color:var(--common-hg-color);

		border-bottom:2px solid var(--common-border-color);
	}
	#SYNEShop_Produktgruppen nav {
		max-height: 50vh;
		overflow: auto;
		box-shadow: 0px 1em 1em black;
	}
	
	
	/* ---- Produkttests: ---- */
	#CProdukttests article header {
		grid-template-columns:100%;
		grid-template-areas:
			"Datum"
			"Titel"
			"Teaser"
			"Produkte";
		gap:0.5em;
		margin-bottom:1em;
	}
	#CProdukttests ul {
		margin-left:0px;
	}
	#CProdukttests li {
		margin-left:0.8em;
	}
	#CProdukttests ul ul {
		margin-left:1.5em;
	}
	/* ENDE Produkttests: ---- */
}


/* #### ../../../../system/css/font_anton.css #### */
@font-face {
    font-family: 'Anton';
    src: url('/system/fonts/Anton/Anton-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}