/*

https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/


*/


/* VARIABELN ############################################################################ */

*  {
	--mainwrap-maxwidth: 2000px;   /*maximale Bildschirmbreite*/
	--mainwrap-width: min(100vw, var(--mainwrap-maxwidth));   /*effektive und nach gridwrap-maxwidth limitierte viewportbreite*/
	--mainwrap-width05pc: calc(var(--mainwrap-width) * 0.05);   /*5 Prozent der mainwrap-Breite*/
	--mainwrap-width10pc: calc(var(--mainwrap-width) * 0.1);   /*10 Prozent der mainwrap-Breite*/
	--mainwrap-width15pc: calc(var(--mainwrap-width) * 0.15);   /*10 Prozent der mainwrap-Breite*/
	--mainwrap-width20pc: calc(var(--mainwrap-width) * 0.2);   /*20 Prozent der mainwrap-Breite*/
	--mainwrap-width25pc: calc(var(--mainwrap-width) * 0.25);   /*20 Prozent der mainwrap-Breite*/
	--mainwrap-width30pc: calc(var(--mainwrap-width) * 0.3);   /*30 Prozent der mainwrap-Breite*/
	--mainwrap-width35pc: calc(var(--mainwrap-width) * 0.35);   /*30 Prozent der mainwrap-Breite*/
	--mainwrap-width40pc: calc(var(--mainwrap-width) * 0.4);   /*40 Prozent der mainwrap-Breite*/
	--mainwrap-width45pc: calc(var(--mainwrap-width) * 0.45);   /*40 Prozent der mainwrap-Breite*/
	--mainwrap-width50pc: calc(var(--mainwrap-width) * 0.5);   /*50 Prozent der mainwrap-Breite*/
	--mainwrap-width55pc: calc(var(--mainwrap-width) * 0.55);   /*55 Prozent der mainwrap-Breite*/
	--mainwrap-width60pc: calc(var(--mainwrap-width) * 0.6);   /*60 Prozent der mainwrap-Breite*/
	--mainwrap-width65pc: calc(var(--mainwrap-width) * 0.65);   /*65 Prozent der mainwrap-Breite*/
	--mainwrap-width70pc: calc(var(--mainwrap-width) * 0.7);   /*70 Prozent der mainwrap-Breite*/
	--mainwrap-width75pc: calc(var(--mainwrap-width) * 0.75);   /*75 Prozent der mainwrap-Breite*/
	--mainwrap-width80pc: calc(var(--mainwrap-width) * 0.8);   /*80 Prozent der mainwrap-Breite*/
	--mainwrap-width85pc: calc(var(--mainwrap-width) * 0.85);   /*85 Prozent der mainwrap-Breite*/
	--mainwrap-width90pc: calc(var(--mainwrap-width) * 0.9);   /*90 Prozent der mainwrap-Breite*/
	--mainwrap-width95pc: calc(var(--mainwrap-width) * 0.95);   /*95 Prozent der mainwrap-Breite*/

	--gridwrap-contentwidth: calc(var(--mainwrap-width) * 0.88);  /* effektive Contentbreite - ACHTUNG FUER ALLE MEDIAQUERIES anpassen > abhaengig von Aussenspalten gridwrap26 */

	--gridwrap-margin-t: max(2.5rem, calc(var(--mainwrap-width) * 0.05));	/*als Ersatz des fehlenden Innenabstand zum Nachbarn bei farbigen oder maskierten Sektionen*/
	--gridwrap-margin-b: max(2.5rem, calc(var(--mainwrap-width) * 0.05));	
	--gridwrap-padding-t: max(0.25rem, calc(var(--mainwrap-width) * 0.04));	/*Innenabstand*/
	--gridwrap-padding-b: max(0.25rem, calc(var(--mainwrap-width) * 0.02));	

	--gridwrap-gap: calc(var(--gridwrap-contentwidth) * 0.025);  /* muss zwingend kleiner als eine Spalte von grid24 sein 4.1 */
	--gridwrap-gap-col: calc(var(--gridwrap-contentwidth) * 0.025);  /* muss zwingend kleiner als eine Spalte von grid24 sein 4.1 */
	--gridwrap-gap-row: calc(var(--gridwrap-contentwidth) * 0.045);  /* hoehe frei */

	--flexcontainer-gap: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.035));	/*flex-gap Abstand alle flex-item im container*/
	--flexcontainer-gap-col: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.035));
	--flexcontainer-gap-row: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.035));

	--div-box-t: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.055));	/*Standard Innenabstand fuer flexcontainer*/
	--div-box-b: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.065));
	--div-box-l: max(1.75rem, calc(var(--gridwrap-contentwidth) * 0.04));
	--div-box-r: var(--div-box-l);
	--div-box: var(--div-box-t) var(--div-box-r) var(--div-box-b) var(--div-box-l);

	--div-box2-t: calc(var(--div-box-t) * 1.5);  /*erweiterter Innenabstand flexcontainer*/
	--div-box2-b: calc(var(--div-box-b) * 1.5);
	--div-box2-l: calc(var(--div-box-l) * 1.5);
	--div-box2-r: var(--div-box2-l);
	--div-box2: var(--div-box2-t) var(--div-box2-r) var(--div-box2-b) var(--div-box2-l);

	--corner-1: 0.3rem; /* abgerundete Ecken */
	--corner-2: 0.7rem;

	--gri-image-height: calc(var(--gridwrap-contentwidth) * 0.75); /*basic height images*/
	--gri-map-height: calc(var(--gridwrap-contentwidth) * 0.9); /*basic height map*/
	--gri-movie-height: calc(var(--gridwrap-contentwidth) * 0.6); /*basic height movie*/
	
	--fli-image-height: calc(var(--gridwrap-contentwidth) * 0.6); /*basic height images*/
	--fli-map-height: calc(var(--gridwrap-contentwidth) * 0.7); /*basic height map*/
	--fli-movie-height: calc(var(--gridwrap-contentwidth) * 0.6); /*basic height movie*/
	--fli-icon-height: 110px; /*basic height movie*/

	--p-fontsize-min: 1.3rem;
	--p-fontsize-norm: calc(var(--mainwrap-width) * 0.025);
	--p-fontsize-max: 2.1rem;
	--p-linehight: calc(var(--p-fontsize) * 1.4);

	--p-fontsize: clamp(var(--p-fontsize-min), var(--p-fontsize-norm), var(--p-fontsize-max));
	--h1-fontsize: clamp(calc(var(--p-fontsize-min) * 1.75), calc(var(--p-fontsize-norm) * 2), calc(var(--p-fontsize-max) * 2.25));
	--h1-linehight: calc(var(--h1-fontsize) * 1.1);
	--h2-fontsize: clamp(calc(var(--p-fontsize-min) * 1.25), calc(var(--p-fontsize-norm) * 1.75), calc(var(--p-fontsize-max) * 1.5));
	--h2-linehight: calc(var(--h2-fontsize) * 1.1);
	--h3-fontsize: clamp(calc(var(--p-fontsize-min) * 1.1), calc(var(--p-fontsize-norm) * 1.5), calc(var(--p-fontsize-max) * 1.3));
	--h3-linehight: calc(var(--h3-fontsize) * 1.2);
	--h4-fontsize: clamp(calc(var(--p-fontsize-min) * 1), calc(var(--p-fontsize-norm) * 1.25), calc(var(--p-fontsize-max) * 1.1));
	--h4-linehight: calc(var(--h4-fontsize) * 1.2);

	--p-fontsize-small: calc(var(--p-fontsize) * 0.90);
	--p-linehight-small: calc(var(--p-linehight) * 0.95);
	--p-fontsize-big: calc(var(--p-fontsize) * 1.35);
	--p-linehight-big: calc(var(--p-linehight) * 1.35);

	--h1-fontsize-big: calc(var(--h1-fontsize) * 1.2);
	--h1-linehight-big: calc(var(--h1-linehight) * 1.15);
	--h2-fontsize-big: calc(var(--h2-fontsize) * 1.2);
	--h2-linehight-big: calc(var(--h2-linehight) * 1.15);
	--h3-fontsize-small: calc(var(--h3-fontsize) * 0.9);
	--h3-linehight-small: calc(var(--h3-linehight) * 0.95);
	--h3-fontsize-big: calc(var(--h3-fontsize) * 1.2);
	--h3-linehight-big: calc(var(--h3-linehight) * 1.15);

}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
	*  {
		--gridwrap-contentwidth: calc(var(--mainwrap-width) * 0.88);

		--gridwrap-margin-t: max(2.5rem, calc(var(--mainwrap-width) * 0.03));	/*als Ersatz des fehlend Innenabstand bei Maskierung zum Nachbarn*/
		--gridwrap-margin-b: max(2.5rem, calc(var(--mainwrap-width) * 0.03));	
		--gridwrap-padding-t: max(0.25rem, calc(var(--mainwrap-width) * 0.01));	/*Innenabstand*/
		--gridwrap-padding-b: max(0.25rem, calc(var(--mainwrap-width) * 0.01));	
	
		--gridwrap-gap: calc(var(--gridwrap-contentwidth) * 0.025);  /* muss zwingend kleiner als eine Spalte von grid24 sein 4.1 */
		--gridwrap-gap-col: calc(var(--gridwrap-contentwidth) * 0.025);  /* muss zwingend kleiner als eine Spalte von grid24 sein 4.1 */
		--gridwrap-gap-row: calc(var(--gridwrap-contentwidth) * 0.033);  /* hoehe frei */
	
		--div-box-t: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.0275));	
		--div-box-b: max(2.0rem, calc(var(--gridwrap-contentwidth) * 0.0325));
		--div-box-l: max(1.75rem, calc(var(--gridwrap-contentwidth) * 0.0275));
		--div-box-r: var(--div-box-l);
		--div-box: var(--div-box-t) var(--div-box-r) var(--div-box-b) var(--div-box-l);
	
		--div-box2-t: calc(var(--div-box-t) * 1.5);  
		--div-box2-b: calc(var(--div-box-b) * 1.5);
		--div-box2-l: calc(var(--div-box-l) * 1.5);
		--div-box2-r: var(--div-box2-l);
		--div-box2: var(--div-box2-t) var(--div-box2-r) var(--div-box2-b) var(--div-box2-l);

		--corner-1: 0.4rem;
		--corner-2: 0.8rem;

		--gri-image-height: calc(var(--gridwrap-contentwidth) * 0.5);
		--gri-map-height: calc(var(--gridwrap-contentwidth) * 0.6); 
		--gri-movie-height: calc(var(--gridwrap-contentwidth) * 0.55);

		--fli-image-height: calc(var(--gridwrap-contentwidth) * 0.5);
		--fli-map-height: calc(var(--gridwrap-contentwidth) * 0.5); 
		--fli-movie-height: calc(var(--gridwrap-contentwidth) * 0.5);} 
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
	*  {
		--gridwrap-contentwidth: calc(var(--mainwrap-width) * 0.7);

		--gridwrap-margin-t: max(2.5rem, calc(var(--mainwrap-width) * 0.03));	/*als Ersatz des fehlend Innenabstand bei Maskierung zum Nachbarn*/
		--gridwrap-margin-b: max(2.5rem, calc(var(--mainwrap-width) * 0.03));	
		--gridwrap-padding-t: max(0.25rem, calc(var(--mainwrap-width) * 0.01));	/*Innenabstand*/
		--gridwrap-padding-b: max(0.25rem, calc(var(--mainwrap-width) * 0.01));	
	
		--corner-1: 0.5rem;
		--corner-2: 0.9rem;
	
		--gri-image-height: calc(var(--gridwrap-contentwidth) * 0.5);
		--gri-map-height: calc(var(--gridwrap-contentwidth) * 0.5); 
		--gri-movie-height: calc(var(--gridwrap-contentwidth) * 0.5);
			
		--fli-image-height: calc(var(--gridwrap-contentwidth) * 0.35);
		--fli-map-height: calc(var(--gridwrap-contentwidth) * 0.5); 
		--fli-movie-height: calc(var(--gridwrap-contentwidth) * 0.5);} 
	}
	/* START DESKTOP 2 */
	@media only screen and (min-width: 1400px) {
	*  {
		--corner-1: 0.6rem;
		--corner-2: 1.2rem;}
	}	
	/* START DESKTOP 3 */
	@media only screen and (min-width: 1700px) {
	}	
	/* START TV */
	@media only screen and (min-width: 2000px) {
	}	



/* Schriften Einbetten ############################################################################ */
@font-face {
	font-family: 'BebasNeue'; src: url(../fonts/BebasNeue-Regular.ttf);}
@font-face {
	font-family: 'OpenSans'; src: url(../fonts/OpenSans-Light.ttf);}
@font-face {
	font-family: 'OpenSansCondensed'; src: url(../fonts/OpenSansCondensed-Light.ttf);}	
@font-face {
	font-family: 'Pacifico'; src: url(../fonts/Pacifico-Regular.ttf);}
@font-face {
	font-family: 'Parisienne'; src: url(../fonts/Parisienne-Regular.ttf);}
@font-face {
	font-family: 'ShadowsIntoLightTwo'; src: url(../fonts/ShadowsIntoLightTwo-Regular.ttf);}
@font-face {
	font-family: 'DancingScript'; src: url(../fonts/DancingScript-VariableFont_wght.ttf);}
@font-face {
	font-family: 'Elegante'; src: url(../fonts/Elegante.ttf);}
@font-face {
	font-family: 'Anton'; src: url(../fonts/Anton-Regular.ttf);}
@font-face {
	font-family: 'RopaSans'; src: url(../fonts/RopaSans-Regular.ttf);}
@font-face {
	font-family: 'BadScript'; src: url(../fonts/BadScript-Regular.ttf);}
@font-face {
	font-family: 'Oswald'; src: url(../fonts/Oswald-ExtraLight.ttf);}	
@font-face {
	font-family: 'Neuton'; src: url(../fonts/Neuton-ExtraLight.ttf);}	
@font-face {
	font-family: 'Sacramento'; src: url(../fonts/Sacramento-Regular.ttf);}	
@font-face {
	font-family: 'PlayfairDisplay'; src: url(../fonts/PlayfairDisplay-Regular.ttf);}	
@font-face {
	font-family: 'PlayfairDisplayVR'; src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);}	
				
					
				
	

/* Grundanweisungen ############################################################################ */
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
html {-webkit-text-size-adjust: 100%;}
body * {box-sizing: border-box; font-size: 100%;}

h1, h2 {font-family: PlayfairDisplayVR; text-transform: none; font-weight: lighter;}
h3, h4 {font-family: PlayfairDisplayVR; text-transform: none; font-weight: lighter;}	
h1 {font-size: var(--h1-fontsize); line-height: var(--h1-linehight); margin: 0; padding: 0;}
h2 {font-size: var(--h2-fontsize); line-height: var(--h2-linehight); margin: 0; padding: 0;}
h3 {font-size: var(--h3-fontsize); line-height: var(--h3-linehight); margin: 0; padding: 0;}
h4 {font-size: var(--h4-fontsize); line-height: var(--h4-linehight); margin: 0; padding: 0;}

p, a, button, .button, input, textarea, select, option, label, ul, li {font-family: OpenSansCondensed; font-size: var(--p-fontsize); line-height: var(--p-linehight); text-decoration: none; margin: 0; padding: 0;} 
a {cursor: pointer; text-decoration: none; outline: none;}
p a { margin: 0; padding: 0 0.75rem; font-weight: bold; text-decoration: underline;}
p img, p svg {height: var(--p-fontsize); max-width: 100%;}

ul {list-style-type: disc; list-style-position: inside; padding-left: 1rem;}
.div-textcenter ul, .div-textcenter ol, .div-textright ul, .div-textright ol {padding-left: 0;}
nav ul {margin-left: 0; padding-left: 0;}

ol {list-style-position: inside; padding-left: 1rem;}
ol li::marker {font-weight: bold; padding-right: 2rem;}

.font-big h1, h1.font-big {font-size: var(--h1-fontsize-big); line-height: var(--h1-linehight-big);}
.font-big h2, h2.font-big {font-size: var(--h2-fontsize-big); line-height: var(--h2-linehight-big);}
.font-big h3, h3.font-big {font-size: var(--h3-fontsize-big); line-height: var(--h3-linehight-big);}
.font-big p, p.font-big, span.font-big {font-size: var(--p-fontsize-big); line-height: var(--p-linehight-big);}
.font-small h3, h3.font-small {font-size: var(--h3-fontsize-small); line-height: var(--h3-linehight-small);}
.font-small p, p.font-small, span.font-small {font-size: var(--p-fontsize-small); line-height: var(--p-linehight-small);}
.font-italic p, p.font-italic, span.font-italic {font-style: italic;}
.font-strong p, p.font-strong, span.font-strong {font-weight: bold;}

.font-padding-t {padding-top: calc(var(--p-linehight) * 0.5);}
.font-padding-l {padding-left: 10%;}
.font-padding-b {padding-bottom: calc(var(--p-linehight) * 0.5);}
.font-padding-r {padding-left: 10%;}
.font-padding-lr {padding-left: 10%; padding-right: 10%;}
.font-padding-tb {padding-top: calc(var(--p-linehight) * 0.5); padding-bottom: calc(var(--p-linehight) * 0.5);}
.font-padding {padding: var(--p-linehight);}

h1.colorset-black, h1.colorset-white, h1.colorset-1, h1.colorset-2, h1.colorset-3 {display: inline-block; padding: 0.4rem 1.5rem 0.6rem 1.5rem;}
h1.colorset-0 {display: inline-block; padding: 0.4rem 0rem 0.6rem 0rem;}
h2.colorset-black, h2.colorset-white, h2.colorset-1, h2.colorset-2, h2.colorset-3 {display: inline-block; padding: 0.4rem 1.5rem 0.6rem 1.5rem;}
h2.colorset-0 {display: inline-block; padding: 0.4rem 0rem 0.6rem 0rem;}
h3.colorset-black, h3.colorset-white, h3.colorset-1, h3.colorset-2, h3.colorset-3 {display: inline-block; padding: 0.3rem 1.5rem 0.5rem 1.5rem;}
h3.colorset-0 {display: inline-block; padding: 0.3rem 0rem 0.5rem 0rem;}
h4.colorset-black, h4.colorset-white, h4.colorset-1, h4.colorset-2, h4.colorset-3 {display: inline-block; padding: 0.3rem 1.5rem 0.5rem 1.5rem;}
h4.colorset-0 {display: inline-block; padding: 0.3rem 0rem 0.5rem 0rem;}

p.colorset-black, p.colorset-white, p.colorset-1, p.colorset-2, p.colorset-3 {display: inline-block; padding: 0.3rem 1.5rem 0.5rem 1.5rem;}
p.colorset-0 {display: inline-block; padding: 0.3rem 0rem 0.5rem 0rem;}

select {appearance: none; border: none;}

button, a.button {opacity: 1; position: relative; display: inline-block; cursor: pointer; padding: 0.15rem 1.3rem 0.2rem 1.3rem; text-decoration: none; outline: none; font-weight: normal; border: 1px solid; transition: all 0.8s 0.25s ease-in-out;}
button:hover, .button:hover {opacity: 0.8; transition: all 0.2s ease-in-out;} 
button:active, .button:active {outline: 5px solid; transition: all 0.2s ease-in-out;}

.selection {opacity: 0.9; position: relative; display: inline-block; padding: 0rem 1.25rem 0.2rem 1.25rem; margin-right: 0.5rem; text-decoration: none; transition: all 0.8s 0.25s ease-in-out;}
.selection:checked {opacity: 1;}	
.selection:hover, .selection:active {outline: 5px solid; transition: all 0.2s ease-in-out;}

input, textarea, select {display: block; width: 100%; padding: 0.5rem 1rem; border: 1px solid;}
input:focus, textarea:focus, select:focus {outline: 4px solid; border: 1px solid;}

textarea {resize: vertical;}	

input[type="checkbox"], input[type="radio"] {display: none;}

input[type="checkbox"] + label span, input[type="radio"] + label span {display: inline-block; cursor: pointer; opacity: 1; position: relative; padding: 0.5rem 1rem 0.5rem 1rem; margin-right: 0.25rem; border: 1px solid; text-decoration: none; transition: all 0.3s 0s ease-in-out;}
input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {opacity: 1;}	
input[type="checkbox"]:hover + label span, input[type="radio"]:hover + label span {opacity: 0.9; outline: 0px solid; transition: all 0.3s 0s ease-in-out;}





/* Abstaende ####################################################### */

/* Abstaende zu Titels */
h1 + h1, h2 + h1, h3 + h1, h4 + h1, p + h1, .button + h1, .selection + h1, ul + h1, ol + h1,
h1 + h2, h2 + h2, h3 + h2, h4 + h2, p + h2, .button + h2, .selection + h2, ul + h2, ol + h2,
h1 + h3, h2 + h3, h3 + h3, h4 + h3, p + h3, .button + h3, .selection + h3, ul + h3, ol + h3,
h1 + h4, h2 + h4, h3 + h4, h4 + h4, p + h4, .button + h4, .selection + h4,  ul + h4, ol + h4 {
	margin-top: var(--p-fontsize);}


/* Abstaende zu wraps */
div.wrap-fli-image + h2, div.wrap-fli-movie + h2, div.wrap-fli-map + h2, div.wrap-fli-icon + h2,
div.wrap-fli-image + h3, div.wrap-fli-movie + h3, div.wrap-fli-map + h3, div.wrap-fli-icon + h3,
div.wrap-fli-image + h4, div.wrap-fli-movie + h4, div.wrap-fli-map + h4, div.wrap-fli-icon + h4,
div.wrap-fli-image + p, div.wrap-fli-movie + p, div.wrap-fli-map + p, div.wrap-fli-icon + p {padding-top: calc(var(--p-linehight) * 0.35);}


/* Abstaende zu Paragraph */	
h1 + p, h2 + p, h3 + p, h4 + p,
p + p, .selection + p, ul + p, ol + p,
p + div, p + a, p + ul, ol + p,
div + .selection, p + .selection, .selection + .selection, ul + .selection, ol + .selection,
.selection + div, .selection + p, .selection + ul, .selection + ol {margin-top: calc(var(--p-fontsize) * 0.4);}

p + p {	margin-top: calc(var(--p-fontsize) * 0.8);}
	
	


	
/* VOR NACH EINEM ELEMENT INHALT EINFUEGEN ####################################################### */
/*
h2::after {
	content:"\A";
	display: block;
	margin: 0 auto;
	vertical-align: middle;
	height: 4px;
	width: 100px;
	margin-top: 20px; 
	margin-bottom: 20px;
	border-radius: 2px;
	white-space: pre;
	background-image: url('svg/h2trenner.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: rgba(0, 0, 0, 0.425);
	transition: all 0.2s ease-in-out;} 

.div-textleft h2::after {
	margin: auto;} 



.fli-textcenter h1::before {
   background-position: center center;} 
.fli-textright h1::before {
   background-position: right center;} 
	  
.colorset-image h1::before {
	background-image: url('svg/h2trenner-cimg.svg');}
  
*/


/* DIV Abrundung der Ecken ####################################################### */

/*
body.corner-cell div.div-corner > div.wrap-gri-color,
body.corner-cell div.div-corner > div.wrap-gri-image {
	border-radius: 20% 80% 26% 74% / 81% 14% 86% 19%;}
*/


/*Zentrale Steuerung der Rundungen
nicht gewuenschte Rundungen werden direkt unter secid.css individuell unterdrueckt*/

body.corner-1 div.wrap-gri-color,
body.corner-1 div.wrap-gri-image,
body.corner-1 div.wrap-gri-link, 
body.corner-1 div.wrap-gri-movie,
body.corner-1 div.wrap-gri-map {border-radius: var(--corner-1);}

body.corner-2 div.wrap-gri-color,
body.corner-2 div.wrap-gri-image,
body.corner-2 div.wrap-gri-link,
body.corner-2 div.wrap-gri-movie,
body.corner-2 div.wrap-gri-map {border-radius: var(--corner-2);}


body.corner-1 div.wrap-fli-image {border-radius: var(--corner-1);}
body.corner-1 div.wrap-fli-movie {border-radius: var(--corner-1);}
body.corner-1 div.wrap-fli-map {border-radius: var(--corner-1);}

body.corner-2 div.wrap-fli-image {border-radius: var(--corner-2);}	
body.corner-2 div.wrap-fli-movie {border-radius: var(--corner-2);}	
body.corner-2 div.wrap-fli-map {border-radius: var(--corner-2);}	

div.gitem-motiv > div.wrap-gri-motiv {border-radius: 0;}
div.gitem-bg > div.wrap-gri-color {border-radius: 0;}
div.gitem-bg > div.wrap-gri-image {border-radius: 0;}


body.corner-1 button, body.corner-1 a.button,
body.corner-1 .selection,
body.corner-1 input, body.corner-1 textarea, body.corner-1 select,
body.corner-1 input[type="checkbox"] + label span, 
body.corner-1 input[type="radio"] + label span {
	border-radius: calc(var(--corner-1) * 0.2);}
body.corner-2 button, body.corner-2 a.button,
body.corner-2 .selection,
body.corner-2 input, body.corner-2 textarea, body.corner-2 select,
body.corner-2 input[type="checkbox"] + label span, 
body.corner-2 input[type="radio"] + label span {
	border-radius: calc(var(--corner-2) * 0.2);}

body.corner-1 nav a p img,
body.corner-2 nav a p img {
	border-radius: calc(var(--corner-1) * 0.25);}





/* DIV horizontale Textausrichtung  ####################################################### */
.div-textleft {text-align: left;}	
.div-textcenter {text-align: center;}
.div-textright {text-align: left;}
	
	/* START TABLET */
	@media only screen and (min-width: 700px) {
	.div-textright {text-align: right;}
	}



/* DIV exakte Hoehen fuer GITEM OHNE Inhalte ohne Masken ####################################################### */
.div-formatpc20 {padding-bottom: calc(100% * 0.30) !important;}
.div-formatpc30 {padding-bottom: calc(100% * 0.40) !important;}
.div-formatpc40 {padding-bottom: calc(100% * 0.50) !important;}	
.div-formatpc50 {padding-bottom: calc(100% * 0.60) !important;}	
.div-formatpc60 {padding-bottom: calc(100% * 0.60) !important;}	
.div-formatpc70 {padding-bottom: calc(100% * 0.70) !important;}	
.div-formatpc80 {padding-bottom: calc(100% * 0.80) !important;}	
	
	/* START TABLET */
	@media only screen and (min-width: 700px) {
		.div-formatpc20 {padding-bottom: calc(100% * 0.30) !important;}
		.div-formatpc30 {padding-bottom: calc(100% * 0.30) !important;}
		.div-formatpc40 {padding-bottom: calc(100% * 0.40) !important;}	
		.div-formatpc50 {padding-bottom: calc(100% * 0.50) !important;}	
		.div-formatpc60 {padding-bottom: calc(100% * 0.60) !important;}	
		.div-formatpc70 {padding-bottom: calc(100% * 0.70) !important;}	
		.div-formatpc80 {padding-bottom: calc(100% * 0.80) !important;}	
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		.div-formatpc20 {padding-bottom: calc(100% * 0.20) !important;}
		.div-formatpc30 {padding-bottom: calc(100% * 0.30) !important;}
		.div-formatpc40 {padding-bottom: calc(100% * 0.40) !important;}	
		.div-formatpc50 {padding-bottom: calc(100% * 0.50) !important;}	
		.div-formatpc60 {padding-bottom: calc(100% * 0.60) !important;}	
		.div-formatpc70 {padding-bottom: calc(100% * 0.70) !important;}	
		.div-formatpc80 {padding-bottom: calc(100% * 0.80) !important;}	
	}


/* DIV minimale Hoehen fuer Bilder mit Text ####################################################### */
.div-formatcw15 {min-height: calc(var(--mainwrap-width) * 0.30);}
.div-formatcw20 {min-height: calc(var(--mainwrap-width) * 0.40);}
.div-formatcw25 {min-height: calc(var(--mainwrap-width) * 0.45);}
.div-formatcw30 {min-height: calc(var(--mainwrap-width) * 0.50);}
.div-formatcw35 {min-height: calc(var(--mainwrap-width) * 0.55);}
.div-formatcw40 {min-height: calc(var(--mainwrap-width) * 0.6);}
.div-formatcw45 {min-height: calc(var(--mainwrap-width) * 0.65);}	
.div-formatcw50 {min-height: calc(var(--mainwrap-width) * 0.70);}
.div-formatcw55 {min-height: calc(var(--mainwrap-width) * 0.80);}
.div-formatcw60 {min-height: calc(var(--mainwrap-width) * 0.90);}	

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		.div-formatcw15 {min-height: calc(var(--mainwrap-width) * 0.30);}	
		.div-formatcw20 {min-height: calc(var(--mainwrap-width) * 0.35);}
		.div-formatcw25 {min-height: calc(var(--mainwrap-width) * 0.40);}
		.div-formatcw30 {min-height: calc(var(--mainwrap-width) * 0.45);}
		.div-formatcw35 {min-height: calc(var(--mainwrap-width) * 0.50);}
		.div-formatcw40 {min-height: calc(var(--mainwrap-width) * 0.55);}
		.div-formatcw45 {min-height: calc(var(--mainwrap-width) * 0.60);}	
		.div-formatcw50 {min-height: calc(var(--mainwrap-width) * 0.65);}
		.div-formatcw55 {min-height: calc(var(--mainwrap-width) * 0.70);}
		.div-formatcw60 {min-height: calc(var(--mainwrap-width) * 0.80);}		
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		.div-formatcw15 {min-height: calc(var(--mainwrap-width) * 0.15);}
		.div-formatcw20 {min-height: calc(var(--mainwrap-width) * 0.20);}
		.div-formatcw25 {min-height: calc(var(--mainwrap-width) * 0.25);}
		.div-formatcw30 {min-height: calc(var(--mainwrap-width) * 0.30);}
		.div-formatcw35 {min-height: calc(var(--mainwrap-width) * 0.35);}
		.div-formatcw40 {min-height: calc(var(--mainwrap-width) * 0.40);}
		.div-formatcw45 {min-height: calc(var(--mainwrap-width) * 0.45);}	
		.div-formatcw50 {min-height: calc(var(--mainwrap-width) * 0.50);}
		.div-formatcw55 {min-height: calc(var(--mainwrap-width) * 0.55);}
		.div-formatcw60 {min-height: calc(var(--mainwrap-width) * 0.60);}	
	}




/* Zusatz-Styling ############################################################################ */
.opacity100 {opacity: 1}
.opacity90 {opacity: .9}
.opacity80 {opacity: .8}
.opacity70 {opacity: .7}
.opacity60 {opacity: .6}
.opacity50 {opacity: .5}
.opacity40 {opacity: .4}
.opacity30 {opacity: .3}
.opacity20 {opacity: .2}	
.opacity10 {opacity: .1}
.opacity0 {opacity: 0}	

.div-boxshadow div.wrap-gri-color,
.div-boxshadow div.wrap-gri-image {box-shadow: 0rem 0.5rem 0.75rem rgba(0, 0, 0, 0.5);}

.div-boxshadow-mo div.wrap-gri-color,
.div-boxshadow-mo div.wrap-gri-image {box-shadow: 0 0 0 rgba(0, 0, 0, 0.185); transition: all 0.4s;}
.div-boxshadow-mo:hover div.wrap-gri-color,
.div-boxshadow-mo:hover div.wrap-gri-image {box-shadow: 0rem 0.35rem 0.5rem rgba(0, 0, 0, 0.185);}

.div-dropshadow {filter: drop-shadow(0rem 0.5rem 0.75rem rgba(0, 0, 0, 0.5));}




/* BEREICHE ############################################################################ */
nav, header, section, footer {
	position: relative;
	width: 100%; height: auto;
	margin: 0; padding: 0;}


	


/* MAINWRAP ############################################################################ */
.mainwrap {
	position: relative;
	width: 100%; max-width: var(--mainwrap-maxwidth); 
	height: auto; min-height: 100%; 
	margin: 0 auto; padding: 0;
	overflow: hidden;}

.mainwrap-bg {
	z-index: 21;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%; 
	margin: 0; padding: 0;}
	




/* GRIDWRAP ############################################################################ */
.gridwrap26 {
	position: relative;
	display: grid;
	grid-template-columns: 3% repeat(24, 1fr) 3%;
	grid-template-rows: min-content min-content min-content;
	grid-auto-rows: minmax(min-content, auto);
	column-gap: var(--gridwrap-gap-col); row-gap:  var(--gridwrap-gap-row);
	justify-content: stretch; align-content: stretch;
	justify-items: stretch; align-items: stretch;
	max-width: var(--mainwrap-maxwidth);
	margin: 0 auto;}

.gridwrap26 > div {position: relative; z-index: 100;}

.gridwrap26 > div.gitem-top {grid-column: 1 / -1; grid-row: 1 / 2; height: var(--gridwrap-padding-t);}  /* Abstand oben */
.gridwrap26 > div.gitem-bottom {grid-column: 1 / -1; grid-row: -2 / -1; height: var(--gridwrap-padding-b);}  /* Abstand oben */
.gridwrap26 > div.gitem-bg {grid-column: 1 / -1; grid-row: 1 / -1; z-index: 41;} /* Hintergrundfarben oder Hintergrundbild */ 
.gridwrap26 > div.gitem-motiv {grid-column: 1 / -1; grid-row: 1 / -1; z-index: 31;}

.gridwrap26 > div.flexcontainer {z-index: 101;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
	}	
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1400px) {
		.gridwrap26 {grid-template-columns: 4% repeat(24, 1fr) 4%;}
	}
	/* START DESKTOP 2 */
	@media only screen and (min-width: 1400px) {
		.gridwrap26 {grid-template-columns: 4% repeat(24, 1fr) 4%;}
	}
	/* START DESKTOP 3 */
	@media only screen and (min-width: 1700px) {
		.gridwrap26 {grid-template-columns: 6% repeat(24, 1fr) 6%;}
	}



/* GRIDWRAP ############################################################################ */
.gridwrap24 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	grid-template-rows: min-content min-content min-content;
	grid-auto-rows: minmax(min-content, auto);
	column-gap: var(--gridwrap-gap-col); row-gap: var(--gridwrap-gap-row);
	justify-content: stretch; align-content: stretch;
	justify-items: stretch; align-items: stretch;
	max-width: var(--mainwrap-maxwidth);
	margin: 0 auto;}

.gridwrap24 > div {position: relative; z-index: 100;}

.gridwrap24 > div.gitem-top {grid-column: 1 / -1; grid-row: 1 / 2; height: var(--gridwrap-padding-t);}  /* Abstand oben */
.gridwrap24 > div.gitem-bottom {grid-column: 1 / -1; grid-row: -2 / -1; height: var(--gridwrap-padding-b);}  /* Abstand oben */
.gridwrap24 > div.gitem-bg {grid-column: 1 / -1; grid-row: 1 / -1; z-index: 41;} /* Hintergrundfarben oder Hintergrundbild */
.gridwrap24 > div.gitem-motiv {grid-column: 1 / -1; grid-row: 1 / -1; z-index: 31;}

.gridwrap26 > div.flexcontainer {z-index: 101;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
	}	
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1400px) {
	}







/* GRIDLIST-24 ############################################################################ */
.gridlist-24 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	grid-template-rows: min-content;
	grid-auto-rows: minmax(min-content, auto);
	column-gap: 0; row-gap: 0;
	justify-content: stretch; align-content: stretch;
	justify-items: stretch; align-items: stretch;}

.gridlist-24 > div {position: relative;}

	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
	}
	/* START DESKTOP 2 */
	@media only screen and (min-width: 1400px) {
	}
	/* START DESKTOP 3 */
	@media only screen and (min-width: 1700px) {
	}
	/* START TV */
	@media only screen and (min-width: 2000px) {
	}





/* GRIDLIST-GALLERY ############################################################################ */
.gridlist-gallery {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.45), 1fr));
	grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.20), min-content);
	column-gap: var(--gridwrap-gap-col); row-gap: var(--gridwrap-gap-row);
	grid-auto-flow: row dense;
	justify-content: stretch; align-content: stretch;
	justify-items: stretch; align-items: stretch;}

.gridlist-gallery > div {grid-column: span 2; grid-row: span 3; position: relative;}

.gridlist-gallery.version-1 > div:nth-child(4n+3) {grid-column: span 1; grid-row: span 2;}
.gridlist-gallery.version-1 > div:nth-child(4n+4) {grid-column: span 1; grid-row: span 2;}	

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		.gridlist-gallery {
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.45), 1fr)); 
			grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.18), min-content);}

		/*mediaqueries  neutralisieren*/
		.gridlist-gallery > div {grid-column: span 1; grid-row: span 2; position: relative;}
		.gridlist-gallery.version-1 > div:nth-child(4n+3) {grid-column: span 1; grid-row: span 2;}
		.gridlist-gallery.version-1 > div:nth-child(4n+4) {grid-column: span 1; grid-row: span 2;}	

		.gridlist-gallery.version-1 > div:nth-child(5n+3) {grid-column: span 2; grid-row: span 3;}	
		.gridlist-gallery.version-1 > div:last-child {grid-column: span 1; grid-row: span 2;}
	}
	/* START TABLET OHNE MAUS */
	@media only screen and (min-width: 700px) and (pointer: coarse) and (any-pointer: coarse) {
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		.gridlist-gallery {
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.14), 1fr)); 
			grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.35), min-content);}

		/*mediaqueries  neutralisieren*/
		.gridlist-gallery > div {grid-column: span 2; grid-row: span 1; position: relative;}
		.gridlist-gallery.version-1 > div:nth-child(4n+3) {grid-column: span 2; grid-row: span 1;}
		.gridlist-gallery.version-1 > div:nth-child(4n+4) {grid-column: span 2; grid-row: span 1;}	
		.gridlist-gallery.version-1 > div:nth-child(5n+3) {grid-column: span 2; grid-row: span 1;}	
		.gridlist-gallery.version-1 > div:last-child {grid-column: span 2; grid-row: span 1;}
	
		.gridlist-gallery.version-1 > div:nth-child(13n+4) {grid-column: span 3; grid-row: span 1;}
		.gridlist-gallery.version-1 > div:nth-child(13n+5) {grid-column: span 3; grid-row: span 2;}
		.gridlist-gallery.version-1 > div:nth-child(13n+6) {grid-column: span 3; grid-row: span 2;}
		.gridlist-gallery.version-1 > div:nth-child(13n+7) {grid-column: span 3; grid-row: span 1;}
		.gridlist-gallery.version-1 > div:nth-child(13n+12) {grid-column: span 4; grid-row: span 2;}
	}
	/* START DESKTOP 2 */
	@media only screen and (min-width: 1400px) {
	}
	/* START DESKTOP 3 */
	@media only screen and (min-width: 1700px) {
	}
	/* START TV */
	@media only screen and (min-width: 2000px) {
	}






/* GRIDLIST-WISHLIST ############################################################################ */
.gridlist-wishlist {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.60), 1fr));
	grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.6), min-content);
	grid-auto-flow: row dense;
	column-gap: var(--gridwrap-gap-col); row-gap: var(--gridwrap-gap-row);
	justify-content: stretch; align-content: stretch;
	justify-items: stretch; align-items: stretch;}

.gridlist-wishlist > div {grid-column: span 1; grid-row: span 1; position: relative;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		.gridlist-wishlist {
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.45), 1fr)); 
			grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.18), min-content);}

		.gridlist-wishlist > div {grid-column: span 1; grid-row: span 2; position: relative;}

		.gridlist-wishlist.version-1 > div:nth-child(5n+3) {grid-column: span 2; grid-row: span 3;}	
		.gridlist-wishlist.version-1 > div:last-child {grid-column: span 1; grid-row: span 2;}

	}
	/* START TABLET OHNE MAUS */
	@media only screen and (min-width: 700px) and (pointer: coarse) and (any-pointer: coarse) {
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		.gridlist-wishlist {
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--gridwrap-contentwidth) * 0.14), 1fr)); 
			grid-auto-rows: minmax(calc(var(--gridwrap-contentwidth) * 0.40), min-content);}

		.gridlist-wishlist > div {grid-column: span 3; grid-row: span 1; position: relative;}

		/*mediaqueries  neutralisieren*/
		.gridlist-wishlist.version-1 > div:nth-child(5n+3) {grid-column: span 3; grid-row: span 1;}	
		.gridlist-wishlist.version-1 > div:last-child {grid-column: span 3; grid-row: span 1;}

		.gridlist-wishlist.version-1 > div {grid-column: span 3; grid-row: span 1; position: relative;}
		.gridlist-wishlist.version-1 > div:nth-child(9n+3) {grid-column: span 2; grid-row: span 1;}	
		.gridlist-wishlist.version-1 > div:nth-child(9n+4) {grid-column: span 4; grid-row: span 1;}	
		.gridlist-wishlist.version-1 > div:nth-child(9n+5) {grid-column: span 3; grid-row: span 2;}
		.gridlist-wishlist.version-1 > div:nth-child(9n+8) {grid-column: span 4; grid-row: span 1;}
		.gridlist-wishlist.version-1 > div:nth-child(9n+9) {grid-column: span 2; grid-row: span 1;}	
		.gridlist-wishlist.version-1 > div:last-child {grid-row: span 1;}
	}
	/* START DESKTOP 2 */
	@media only screen and (min-width: 1400px) {
	}
	/* START DESKTOP 3 */
	@media only screen and (min-width: 1700px) {
	}
	/* START TV */
	@media only screen and (min-width: 2000px) {
	}






/* SECTION TYPEN ############################################################################ 
gridwrapXX > items

typ-sec-overlay		Overlay über Inhalt schiebend (Navigation usw.)

*/

.typ-sec-overlay {margin-top: 0 !important; margin-bottom: 0 !important;}


	/* START TABLET */
	@media only screen and (min-width: 700px) {

	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {

	}









/* GRI TYPEN ############################################################################ 
gridwrapXX > items

typ-gri-text		Text
typ-gri-image		Bild 
typ-gri-imagetext	Bild mit gradient für ueberliegendem Text
typ-gri-imagelink	Bild mit Mouseover und überlagertem Link (Wunschliste usw.) > wrap-gri-link verwenden
typ-gri-movie		iframe-Movie
typ-gri-map			iframe-Map
typ-gri-list		innere neue grid-list

*/

div.typ-gri-image {min-height: var(--gri-image-height);}
div.typ-gri-imagetxt > div.flexcontainer {min-height: var(--gri-image-height); padding: var(--div-box); padding-bottom: calc(var(--div-box-b) * 1.25);} /* da Inhalte, muss die Streckung ueber flexcontainer erfolgen */
div.typ-gri-imagelink > div.flexcontainer {min-height: var(--gri-image-height); padding: var(--div-box); padding-bottom: calc(var(--div-box-b) * 1.25);} 
div.typ-gri-movie {min-height: var(--gri-movie-height);}
div.typ-gri-map {min-height: var(--gri-map-height);}
div.typ-gri-list {border-radius: 0px;}
div.typ-gri-wishlistitem > div.flexcontainer {min-height: auto;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		div.typ-gri-imagetxt > div.flexcontainer {padding-bottom: calc(var(--div-box-b) * 1.5);} 
		div.typ-gri-imagelink > div.flexcontainer {padding-bottom: calc(var(--div-box-b) * 1.5);} 
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		div.typ-gri-imagetxt > div.flexcontainer {padding-bottom: calc(var(--div-box-b) * 1.75);} 
		div.typ-gri-imagelink > div.flexcontainer {padding-bottom: calc(var(--div-box-b) * 1.75);} 
	}



/* weitere Innenabstände für flexcontainer ############################################################################ */

div.colorset-b > div.flexcontainer,
div.colorset-d > div.flexcontainer,
div.colorset-black > div.flexcontainer,
div.colorset-white > div.flexcontainer,
div.colorset-1 > div.flexcontainer,
div.colorset-2 > div.flexcontainer,
div.colorset-3 > div.flexcontainer {padding: var(--div-box);}
	


/*---------------------------------------------------------------------------------------------------------------
WRAP
----------------------------------------------------------------------------------------------------------------- */

/* GRIDITEM allgemein - Hintergrundfarbe */
div.wrap-gri-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* mask-bottom / mask-full / corner */
div.wrap-gri-color > .main-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* mask-top */
div.wrap-gri-color > div > .sub-pattern {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}	

.colorset-0 > div.wrap-gri-color {display: none;}
.colorset-black > div.wrap-gri-color,
.colorset-white > div.wrap-gri-color,
.colorset-b > div.wrap-gri-color,
.colorset-d > div.wrap-gri-color,
.colorset-1 > div.wrap-gri-color,
.colorset-2 > div.wrap-gri-color,
.colorset-3 > div.wrap-gri-color {display: block;}




/* GRIDITEM allgemein - Hintergrundbild */
div.wrap-gri-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* mask-bottom / mask-full / corner */
div.wrap-gri-image > .main-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;} /* mask-top */
div.wrap-gri-image > div > .sub-gradient {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-gri-image > div > .sub-hover {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

div.typ-gri-imagetext > div.wrap-gri-image > div > .sub-gradient {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);}

div.typ-gri-imagelink > div.wrap-gri-image > .main-image {transform: rotate(0deg) scale(1.0); transition: all 0.3s 0s ease-in-out;}
div.typ-gri-imagelink:hover > div.wrap-gri-image > .main-image {transform: rotate(-0.5deg) scale(1.05);}
div.typ-gri-imagelink > div.wrap-gri-image > div > .sub-gradient {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);}
div.typ-gri-imagelink > div.wrap-gri-image > div > .sub-hover {display: block; background-color: rgba(0, 0, 0, 0); transition: all 0.3s 0s ease-in-out;}
div.typ-gri-imagelink:hover > div.wrap-gri-image > div > .sub-hover {display: block; background-color: rgba(0, 0, 0, 0.3);}

div.typ-gri-imagelink > div.flexcontainer {opacity: 1; transition: all 0.3s 0s ease-in-out;}
div.typ-gri-imagelink:hover > div.flexcontainer {opacity: 0.5; transition: all 0.3s 0s ease-in-out;}

	/* GERAETE OHNE MAUS */
	@media (pointer: coarse) and (any-pointer: coarse) {
		div.typ-gri-imagelink:hover > div.wrap-gri-image > .main-image {transform: rotate(0deg) scale(1.0);}
		div.wrap-gri-image > div > .sub-hover {display: none;}
		div.typ-gri-imagelink:hover > div.flexcontainer {opacity: 1;}
	}




/* GRIDWRAP24/26 > GITEM-BG - Hintergrundbild und Hintergrundfarbe der Sektion*/
div.gitem-bg > div.wrap-gri-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* mask-bottom / mask-full / corner */
div.gitem-bg > div.wrap-gri-color > .main-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* mask-top */  
div.gitem-bg > div.wrap-gri-color > div > .sub-pattern {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

div.gitem-bg > div.wrap-gri-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* mask-bottom / mask-full / corner */
div.gitem-bg > div.wrap-gri-image > .main-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;}   /* mask-top */ 
div.gitem-bg > div.wrap-gri-image > div > .sub-gradient {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}  
div.gitem-bg > div.wrap-gri-image > div > .sub-pattern {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}	
div.gitem-bg > div.wrap-gri-image > div > .sub-hover {display: none;}

.sec-colorset-0 div.gitem-bg {display: none;}
.sec-colorset-black div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-white div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-b div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-d div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-1 div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-2 div.gitem-bg > div.wrap-gri-color, 
.sec-colorset-3 div.gitem-bg > div.wrap-gri-color {display: block;}



/* GRIDWRAP24/26 > GITEM-MOTIV - Motiv im Hintergrund*/
div.gitem-motiv > div.wrap-gri-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* mask-bottom / mask-full / corner */
div.gitem-motiv > div.wrap-gri-motiv > .main-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat;} /* mask */
div.gitem-motiv > div.wrap-gri-motiv > .main-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat;} /* motiv */



/* GRIDITEM allgemein - Bildlink */
div.typ-gri-imagelink > div.wrap-gri-link {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
div.typ-gri-imagelink >  div.wrap-gri-link > .main-link {position: absolute; top: 0; right: 0; width: 20%; max-width: 40px; height: 100%; background-image: url(../grafic/navigation/nav-imagebutton-right-black.svg); background-size: 100% auto; background-position: top right; background-repeat: no-repeat; transition: all 0.3s 0s ease-in-out; opacity: 0.6;}
div.typ-gri-imagelink:hover > div.wrap-gri-link > .main-link {opacity: 1;}
div.typ-gri-imagelink > div.wrap-gri-link > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

	/* GERAETE OHNE MAUS */
	@media (pointer: coarse) and (any-pointer: coarse) {
		div.typ-gri-imagelink:hover > div.wrap-gri-link > .main-link {opacity: 1;}
	}
	/* START TABLET */
	@media only screen and (min-width: 700px) {
		div.typ-gri-imagelink > div.wrap-gri-link > .main-link {max-width: 45px;}
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		div.typ-gri-imagelink > div.wrap-gri-link > .main-link {max-width: 50px;}
	}


/*Hintergrundkarte*/
div.wrap-gri-map {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* basic corner */
div.wrap-gri-map > .main-map {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-gri-map > div iframe, div.wrap-gri-map > div object, div.wrap-gri-map > div embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



/*Hintergrundvideo*/
div.wrap-gri-movie {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} /* basic corner */
div.wrap-gri-movie > .main-movie {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-gri-movie > div iframe, div.wrap-gri-movie > div object, div.wrap-gri-movie > div embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



/*Hintergrundmotiv vor und hinter wrap-gri-image oder wrap-gri-color*/
div.wrap-gri-behind {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}   
div.wrap-gri-behind > .main-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; transform: scale(1.2); transform-origin: center center;}   

div.wrap-gri-front {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-gri-front > .main-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; transform: scale(1.1); transform-origin: center center;}



/*Hintergrundmotiv*/
div.wrap-gri-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}   
div.wrap-gri-motiv > .main-color {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-gri-motiv > .main-motiv {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}




/*Rahmen*/
div.wrap-gri-border {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}   
div.wrap-gri-border > .main-border {position: relative; width: 100%; height: 100%;}

div.wrap-gri-border {padding: 10px;}
div.colorset-0 > div.wrap-gri-border, div.colorset-b > div.wrap-gri-border, div.colorset-d > div.wrap-gri-border {padding: 0;}

div:not(.border-on) > div.wrap-gri-border {display: none;}
div.border-solid > div.wrap-gri-border > .main-border {border-style: solid; border-width: 2px;}
div.border-dashed > div.wrap-gri-border > .main-border {border-style: dashed; border-width: 2px;}
div.border-dotted > div.wrap-gri-border > .main-border {border-style: dotted; border-width: 2px;}
div.border-1 > div.wrap-gri-border > .main-border {border-width: 2px;}
div.border-2 > div.wrap-gri-border > .main-border {border-width: 2px;}
div.border-3 > div.wrap-gri-border > .main-border {border-width: 3px;}
div.border-4 > div.wrap-gri-border > .main-border {border-width: 3px;}
div.border-5 > div.wrap-gri-border > .main-border {border-width: 3px;}
div.border-6 > div.wrap-gri-border > .main-border {border-width: 3px;}
div.border-7 > div.wrap-gri-border > .main-border {border-width: 3px;}
div.border-8 > div.wrap-gri-border > .main-border {border-width: 3px;}

div.border-on > div.flexcontainer {padding: var(--div-box2);}
body.corner-1 div.wrap-gri-border > .main-border {border-radius: calc(var(--corner-1) * 0.75);}
body.corner-1 div.colorset-b div.wrap-gri-border > .main-border {border-radius: var(--corner-1);}
body.corner-1 div.colorset-d div.wrap-gri-border > .main-border {border-radius: var(--corner-1);}
body.corner-2 div.wrap-gri-border > .main-border {border-radius: calc(var(--corner-2) * 0.75);}
body.corner-2 div.colorset-b div.wrap-gri-border > .main-border {border-radius: var(--corner-2);}
body.corner-2 div.colorset-d div.wrap-gri-border > .main-border {border-radius: var(--corner-2);}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		div.wrap-gri-border {padding: 12px;}
		div.border-1 > div.wrap-gri-border > .main-border {border-width: 1px;}
		div.border-2 > div.wrap-gri-border > .main-border {border-width: 2px;}
		div.border-3 > div.wrap-gri-border > .main-border {border-width: 3px;}
		div.border-4 > div.wrap-gri-border > .main-border {border-width: 4px;}
		div.border-5 > div.wrap-gri-border > .main-border {border-width: 5px;}
		div.border-6 > div.wrap-gri-border > .main-border {border-width: 5px;}
		div.border-7 > div.wrap-gri-border > .main-border {border-width: 5px;}
		div.border-8 > div.wrap-gri-border > .main-border {border-width: 5px;}
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		div.wrap-gri-border {padding: 14px;}
		div.border-6 > div.wrap-gri-border > .main-border {border-width: 6px;}
		div.border-7 > div.wrap-gri-border > .main-border {border-width: 7px;}
		div.border-8 > div.wrap-gri-border > .main-border {border-width: 8px;}
	}
	
	




/*Wunschliste Status 1*/
div.wishstatus-1 div.wrap-gri-wishliststatus {display: none; position: absolute; bottom: 0; left: 0%; width: 100%; height: 20px; background-color: rgba(255, 255, 255, 0.3); opacity: 1; transition: all 0.5s 0s ease-in-out; overflow: hidden;}
div.wishstatus-1 div.wrap-gri-wishliststatus {display: block;}
div.typ-gri-wishlistitem:hover > div.wrap-gri-wishliststatus {opacity: 0;}

div.wishstatus-1 div.wrap-gri-wishliststatus > div {position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.25) 0%, rgba(0, 153, 25, 1) 75%); overflow: hidden;}
div.wishstatus-1 div.fulfilled10 > div.wrap-gri-wishliststatus > div {width: 10%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1 div.fulfilled20 > div.wrap-gri-wishliststatus > div {width: 20%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1 div.fulfilled30 > div.wrap-gri-wishliststatus > div {width: 30%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1 div.fulfilled40 > div.wrap-gri-wishliststatus > div {width: 40%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1 div.fulfilled50 > div.wrap-gri-wishliststatus > div {width: 50%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1 div.fulfilled60 > div.wrap-gri-wishliststatus > div {width: 60%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1 div.fulfilled70 > div.wrap-gri-wishliststatus > div {width: 70%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1 div.fulfilled80 > div.wrap-gri-wishliststatus > div {width: 80%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1 div.fulfilled90 > div.wrap-gri-wishliststatus > div {width: 90%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1 div.fulfilled100 > div.wrap-gri-wishliststatus > div {width: 100%; background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 1) 100%);}

body.corner-1 div.wishstatus-1 div.wrap-gri-wishliststatus {border-bottom-left-radius: var(--corner-1); border-bottom-right-radius: var(--corner-1);}
body.corner-2 div.wishstatus-1 div.wrap-gri-wishliststatus {border-bottom-left-radius: var(--corner-2); border-bottom-right-radius: var(--corner-2);} 

/*Wunschliste Status 2*/
div.wishstatus-2 div.wrap-gri-wishliststatus {display: none; position: absolute; bottom: 0; left: 15%; width: 70%; height: 20px; background-color: rgba(255, 255, 255, 0.3); opacity: 1; transition: all 0.5s 0s ease-in-out; overflow: hidden;}
div.wishstatus-2 div.wrap-gri-wishliststatus {display: block;}
div.typ-gri-wishlistitem:hover > div.wrap-gri-wishliststatus {opacity: 0;}

div.wishstatus-2 div.wrap-gri-wishliststatus > div {position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.25) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled10 > div.wrap-gri-wishliststatus > div {width: 10%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled20 > div.wrap-gri-wishliststatus > div {width: 20%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled30 > div.wrap-gri-wishliststatus > div {width: 30%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled40 > div.wrap-gri-wishliststatus > div {width: 40%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled50 > div.wrap-gri-wishliststatus > div {width: 50%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-2 div.fulfilled60 > div.wrap-gri-wishliststatus > div {width: 60%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-2 div.fulfilled70 > div.wrap-gri-wishliststatus > div {width: 70%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-2 div.fulfilled80 > div.wrap-gri-wishliststatus > div {width: 80%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-2 div.fulfilled90 > div.wrap-gri-wishliststatus > div {width: 90%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-2 div.fulfilled100 > div.wrap-gri-wishliststatus > div {width: 100%; background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 1) 100%);}

body.corner-1 div.wishstatus-2 div.wrap-gri-wishliststatus, body.corner-2 div.wishstatus-2 div.wrap-gri-wishliststatus {border-top-left-radius: 6px; border-top-right-radius: 6px;}


/*Wunschliste Status 3*/
div.wishstatus-3 div.wrap-gri-wishliststatus {display: none; position: absolute; bottom: var(--div-box-b); left: 50%; width: 70px; height: 16px; border-radius: 8px; opacity: 1; transform: translateX(-50%); transition: all 0.5s 0s ease-in-out; overflow: hidden;}
div.wishstatus-3 div.wrap-gri-wishliststatus {display: block;}

div.wishstatus-3 div.wrap-gri-wishliststatus > div {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 153, 25);}
div.wishstatus-3 div.fulfilled10 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled20 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled30 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled40 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled50 > div.wrap-gri-wishliststatus > div {background-color: rgba(0, 153, 25);}
div.wishstatus-3 div.fulfilled60 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled70 > div.wrap-gri-wishliststatus > div,
div.wishstatus-3 div.fulfilled80 > div.wrap-gri-wishliststatus > div, 
div.wishstatus-3 div.fulfilled90 > div.wrap-gri-wishliststatus > div {background-color: rgba(196, 116, 41);}
div.wishstatus-3 div.fulfilled100 > div.wrap-gri-wishliststatus > div {background-color: rgba(255, 0, 0);}  

div.wishstatus-3 div.flexcontainer {padding-bottom: calc(var(--div-box-b) * 2);}


/*Wunschliste Status - inaktiv wenn verschenk*/
div.typ-gri-imagelink.fulfilled100 > div.wrap-gri-image > div.sub-image {transform: rotate(0deg) scale(1); filter: grayscale(100);}
div.typ-gri-imagelink.fulfilled100 > div.wrap-gri-image > div.sub-image > div.sub-hover {display: none;}
div.typ-gri-imagelink.fulfilled100 > div > div > div.wrap-fli-icon {visibility: hidden;}
div.typ-gri-imagelink.fulfilled100 > div > div > p {display: none;}












/*---------------------------------------------------------------------------------------------------------------
WRAP-FLI --- FLEXITEM INHALTE - Bilder, Icon, Map, Movie
--------------------------------------------------------------------------------------------------------------- 
.wrap-fli-image
.wrap-fli-movie
.wrap-fli-map
.wrap-fli-icon
*/


/*FLI - Bilder*/
div.wrap-fli-image {position: relative; width: 100%; min-height: var(--fli-image-height); overflow: hidden;} /* basic corner */ /* basic mask-bottom */
div.wrap-fli-image > div.main-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;} /* basic mask-top */
div.wrap-fli-image > div > div.sub-gradient {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}  	
div.wrap-fli-image > div > div.sub-pattern {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div.wrap-fli-image > div > div.sub-hover {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;}
div.wrap-fli-image > div > div.sub-path {position: absolute; top: 0; right: 0; width: 50%; height: var(--h2-fontsize); margin: var(--div-box);}


div > div.wrap-fli-image.version-link > div > div.sub-hover {background-color: rgba(0, 0, 0, 0); transition: all 0.5s 0s ease-in-out;}
div:hover > div.wrap-fli-image.version-link > div > div.sub-hover {background-color: rgba(0, 0, 0, 0.3);}
div > div.wrap-fli-image.version-link > div.sub-image {transform: rotate(0deg) scale(1.00); transition: all 0.5s 0s ease-in-out;}
div:hover > div.wrap-fli-image.version-link > div.main-image {transform: rotate(-0.5deg) scale(1.05);}
div > div.wrap-fli-image.version-link > div > div.sub-path {background-image: url(../svg/pointer-path.svg); background-size: contain; background-position: top right; background-repeat: no-repeat; opacity: 0; transition: all 0.5s 0s ease-in-out;}
div:hover > div.wrap-fli-image.version-link > div >div.sub-path {opacity: 1;}

	/* START TABLET OHNE MAUS */
	@media (pointer: coarse) and (any-pointer: coarse) {
		div.wrap-gri-image > div > div.sub-path {opacity: 0.6;}
	}



/*Videos*/
div.wrap-fli-movie {position: relative; width: 100%; min-height: var(--fli-movie-height); overflow: hidden;} /* basis corner */
div.wrap-fli-movie > div.main-movie {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 
div.wrap-fli-movie > div iframe, div.wrap-fli-movie > div object, div.wrap-fli-movie > div embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 




/*Map*/
div.wrap-fli-map {position: relative; width: 100%; min-height: var(--fli-map-height); overflow: hidden;}  
div.wrap-fli-map > div.main-map {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}   
div.wrap-fli-map > div iframe, div.div-map > div object, div.div-map > div embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



/*Icon*/
div.wrap-fli-icon {position: relative; width: 100%; min-height: var(--fli-icon-height);}
div.wrap-fli-icon > div.sub-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; transition: all 0.2s 0s ease-in-out;}	

body.animation-on div:hover > .flexcontainer div.wrap-fli-icon > div.sub-bg {
	filter: blur(0px);
	transform: scale(0.9);
	transform-origin: center center;
	opacity: 0.5;
	transition: all 0.2s 0s ease-in-out;}	

div.wrap-fli-icon > div.sub-svg {
	position: absolute;
	top: 10%; left: 0;
	width: 100%; height: 80%;
	transition: all 0.2s 0s ease-in-out;}
/*
body.animation-on div:hover > .flexcontainer div.wrap-fli-icon > div.sub-svg {
	transform: translateY(-0.25rem) rotate(0deg) scale(1.05);
	transform-origin: center center;
	transition: all 0.2s 0s ease-in-out;}	
*/
div.wrap-fli-icon > div.sub-svg svg {
	position: absolute;
	top: 0%; left: 0;
	width: 100%; height: 100%;}

/* Icon-Groessen */
div.wrap-fli-icon.iconsize-1 {
	min-height: 50px;}
div.wrap-fli-icon.iconsize-2 {
	min-height: 80px;}
div.wrap-fli-icon.iconsize-3 {
	min-height: 120px;}
div.wrap-fli-icon.iconsize-4 {
	min-height: 140px;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
	div.wrap-fli-icon.iconsize-1 {
		min-height: 70px;}
	div.wrap-fli-icon.iconsize-2 {
		min-height: 100px;}
	div.wrap-fli-icon.iconsize-3 {
		min-height: 140px;}
	div.wrap-fli-icon.iconsize-4 {
		min-height: 180px;}
	}


/*Wunschliste Status 1*/
div.wishstatus-1 div.wrap-fli-wishliststatus {position: relative; width: 80%; height: 40px; border-radius: 10px; margin: 0 auto; background-color: rgba(252, 252, 252, 0.788); opacity: 1; transition: all 0.5s 0s ease-in-out; overflow: hidden;}
div.wishstatus-1 div.wrap-fli-wishliststatus {display: block;}

div.wishstatus-1 div.wrap-fli-wishliststatus > div {position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.25) 0%, rgba(0, 153, 25, 1) 75%); overflow: hidden;}
div.wishstatus-1.fulfilled10 div.wrap-fli-wishliststatus > div {width: 10%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1.fulfilled20 div.wrap-fli-wishliststatus > div {width: 20%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1.fulfilled30 div.wrap-fli-wishliststatus > div {width: 30%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1.fulfilled40 div.wrap-fli-wishliststatus > div {width: 40%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1.fulfilled50 div.wrap-fli-wishliststatus > div {width: 50%; background-image: linear-gradient(90deg, rgba(0, 153, 25, 0.4) 0%, rgba(0, 153, 25, 1) 75%);}
div.wishstatus-1.fulfilled60 div.wrap-fli-wishliststatus > div {width: 60%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1.fulfilled70 div.wrap-fli-wishliststatus > div {width: 70%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1.fulfilled80 div.wrap-fli-wishliststatus > div {width: 80%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1.fulfilled90 div.wrap-fli-wishliststatus > div {width: 90%; background-image: linear-gradient(90deg, rgba(196, 116, 41, 0.6) 0%, rgb(196, 116, 41) 75%);}
div.wishstatus-1.fulfilled100 div.wrap-fli-wishliststatus > div {width: 100%; background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 1) 100%);}








/* Icon-Schattierungen
div.wrap-fli-icon.iconshadow svg {
	filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.8));}
	
 */






/* Flexbox STANDARD ohne Abstaende aussen MUSS AM SCHLUSS ALLER FLEXBOX VARIANTEN STEHEN ####################################################### */

.flexcontainer {
	position: relative; 
	display: flex; 
	flex-wrap: wrap; flex-direction: row; 
	box-sizing: border-box; 
	justify-content: stretch; align-content: flex-start;
	align-items: flex-start;
	column-gap: var(--flexcontainer-gap-col); row-gap: var(--flexcontainer-gap-row); /* flex-gap safari-mobile not supported */
	width: 100%; height: 100%;}

.flexcontainer > div {
	position: relative;} 	
/*
.flexcontainer + .flexcontainer {
	margin-top: var(--flexcontainer-margin-t);} /* Erzeugt Abstand bei zwei nachfolgenden flexcontainern im gleichen div */

.flexcontainer > div.flexcontainer {
	margin: 0; padding: 0;
    column-gap: 0; row-gap: 0;}   /* SUB Flexcontainer */
.flexcontainer > div.flexcontainer > div {
	margin: 0 0 max(0.25rem, 0.5%) 0; padding: 0;}    /* SUB Flexcontainer items*/


/*	Ebene Container
	justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly     items im container horizontal ausrichten
	align-content: flex-start | center | flex-end | stretch | space-between | space-around     items im container vertikal ausdehnen oder ausrichten
	align-item: flex-start | center | flex-end | stretch | baseline    items dimension vertikal ausdehen oder ausrichten

	Ebene Item
	align-self: flex-start | center | flex-end | stretch | baseline
*/

.flexcontainer .fitem-100 {
	flex: 10; flex-grow: 10; flex-shrink: 10;
	min-width: 85%; max-width: 100%;}

.flexcontainer .fitem-80 {
	flex: 8; flex-grow: 8; flex-shrink: 8;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-80 {min-width: 60%; max-width: 80%;}

.flexcontainer .fitem-70 {
	flex: 7; flex-grow: 7; flex-shrink: 7;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-70 {min-width: 60%; max-width: 70%;}

.flexcontainer .fitem-60 {
	flex: 6; flex-grow: 6; flex-shrink: 6;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-60 {min-width: 50%; max-width: 60%;}

.flexcontainer .fitem-50 {
	flex: 5; flex-grow: 5; flex-shrink: 5;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-50 {min-width: 40%; max-width: 50%;}

.flexcontainer .fitem-40 {
	flex: 4; flex-grow: 4; flex-shrink: 4;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-40 {min-width: 30%; max-width: 40%;}

.flexcontainer .fitem-33 {
	flex: 3; flex-grow: 3; flex-shrink: 3;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-33 {min-width: 27%; max-width: 33.33333%;}

.flexcontainer .fitem-30 {
	flex: 3; flex-grow: 3; flex-shrink: 3;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-30 {min-width: 25%; max-width: 30%;}

.flexcontainer .fitem-25 {
	flex: 2; flex-grow: 2; flex-shrink: 2;
	min-width: 40%; max-width: 50%;}
.flexcontainer.flc-fixrow .fitem-25 {min-width: 20%; max-width: 25%;}

.flexcontainer .fitem-20 {
	flex: 2; flex-grow: 2; flex-shrink: 2;
	min-width: 85%; max-width: 100%;}
.flexcontainer.flc-fixrow .fitem-25 {min-width: 15%; max-width: 20%;}


	/* START TABLET */
	@media only screen and (min-width: 700px) {
	.flexcontainer .fitem-80 {
		min-width: 65%; max-width: 75%;}

	.flexcontainer .fitem-70 {
		min-width: 60%; max-width: 70%;}

	.flexcontainer .fitem-60 {
		min-width: 50%; max-width: 60%;}

	.flexcontainer .fitem-50 {
		min-width: 40%; max-width: 50%;}

	.flexcontainer .fitem-40 {
		min-width: 30%; max-width: 40%;}

	.flexcontainer .fitem-33 {
		min-width: 27%; max-width: 33.33333%;}

	.flexcontainer .fitem-30 {
		min-width: 25%; max-width: 30%;}

	.flexcontainer .fitem-25 {
		min-width: 40%; max-width: 50%;}

	.flexcontainer .fitem-20 {
		min-width: 20%; max-width: 25%;}
	}

	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
	.flexcontainer .fitem-80 {
		min-width: 70%; max-width: 80%;}
	.flexcontainer .fitem-25 {
		min-width: 20%; max-width: 25%;}
	.flexcontainer .fitem-20 {
		min-width: 15%; max-width: 20%;}
	} 





/* FLEX Zusatzoptionen ############################################################################ */

/* Flex-Container Gap unterdruecken*/
.flexcontainer.flc-nogap {
	row-gap: 0; column-gap: 0;}
	
/* Flex-Container mit Formulareigenschaften*/
.flexcontainer.flc-formular {
	row-gap: calc(var(--flexcontainer-gap-row) * 0.5); column-gap: calc(var(--flexcontainer-gap-col) * 0.5);}  /*GAP reduzieren*/
.flc-formular p {
	display: block;
	padding-bottom: 0.2rem;
	font-size: var(--p-fontsize-small);}
.flc-formular input, 
.flc-formular textarea,
.flc-formular select,
.flc-formular input[type="checkbox"]:first-of-type + label span,
.flc-formular input[type="radio"]:first-of-type + label span {
	border-top-left-radius: 0px !important;} 


/* Ausrichtung GRID und FLEX und ITEMS ############################################################################ */


/* GRID im DIV-CONTAINER horizontal ausrichten - default STRETCH */
.grc-left {justify-content: start;}	
.grc-center {justify-content: center;}
.grc-right {justify-content: end;}
.grc-stretch {justify-content: stretch;}
.grc-spacea-h {justify-content: space-around;}
.grc-spaceb-h {justify-content: space-between;}
.grc-spacee-h {justify-content: space-evenly;}

/* GRID im DIV-CONTAINER vertikal ausrichten - default STRETCH */
.grc-top {align-content: start;}	
.grc-middle {align-content: center;}
.grc-bottom {align-content: end;}
.grc-stretch {align-content: stretch;}
.grc-spacea-v {align-content: space-around;}
.grc-spaceb-v {align-content: space-between;}
.grc-spacee-v {align-content: space-evenly;}

/* GRID alle ITEMS horizontal ausrichten - default STRETCH */
/*
.grc-gri-left {justify-items: start;}
.grc-gri-center {justify-items: center;}
.grc-gri-right {justify-items: end;}
.grc-gri-stretch {justify-items: stretch;}
*/
/* GRID alle ITEMS vertikal ausrichten - default STRETCH */
/*
.grc-gri-top {align-items: start;}
.grc-gri-middle {align-items: center;}
.grc-gri-bottom {align-items: end;}
.grc-gri-stretch {align-items: stretch;}
*/   

/* Achtung, hindert die standard-items wie bg sich auszudehnen */

/* GRID einzelnes ITEM horizontal ausrichten - default STRETCH */
.gri-left {justify-self: start;}
.gri-center {justify-self: center;}
.gri-right {justify-self: end;}
.gri-stretch-h {justify-self: stretch;}

/* GRID einzelnes ITEM vertikal ausrichten - default STRETCH */
.gri-top {align-self: start;}
.gri-middle {align-self: center;}
.gri-bottom {align-self: end;}
.gri-stretch {align-self: stretch;}



/* FLEX im DIV-CONTAINER horizonal ausrichten - default STRETCH */
.flc-left {justify-content: flex-start;}	
.flc-center {justify-content: center;}
.flc-right {justify-content: flex-end;}
.flc-spacea-h {justify-content: space-around;}
.flc-spaceb-h {justify-content: space-between;}
.flc-spacee-h {justify-content: space-evenly;}

/* FLEX im DIV-CONTAINER vertikal ausrichten - default STRETCH */
.flc-top {align-content: flex-start;}	
.flc-middle {align-content: center;}
.flc-bottom {align-content: flex-end;}
.flc-stretch {align-content: stretch;} 
.flc-spacea-v {align-content: space-around;}
.flc-spaceb-v {align-content: space-between;}
.flc-spacee-v {align-content: space-evenly;}

.flc-spaceb-v div:first-child {align-self: flex-start;}
.flc-spaceb-v div:last-child {align-self: flex-end;}

/* FLEX alle ITEMS horizontal ausrichten - nicht moeglich */

/* FLEX alle ITEMS vertikal ausrichten - default FLEX-START */
.flc-fli-top {align-items: flex-start;}	
.flc-fli-middle {align-items: center;}
.flc-fli-bottom {align-items: flex-end;}
.flc-fli-baseline {align-items: baseline;}
.flc-fli-stretch {align-items: stretch;}

/* FLEX einzelnes ITEMS horizontal ausrichten - nicht moeglich */

/* FLEX einzelnes ITEMS vertikal ausrichten */
.fli-top {align-self: flex-start;}	
.fli-middle {align-self: center;}
.fli-bottom {align-self: flex-end;}
.fli-baseline {align-self: baseline;}
.fli-stretch {align-self: stretch;}




/*---------------------------------------------------------------------------------------------------------------
WRAP-ICON FUER BUTTON
--------------------------------------------------------------------------------------------------------------- 
.wrap-fli-icon  iconsize-1
	.sub-svg
		svg (Quellcode)
*/

div.wrap-button-icon {
	position: relative; 
	width: 100%;}

div.wrap-button-icon > div.sub-svg {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	transition: all 0.2s 0s ease-in-out;}

body.animation-on div:hover > .flexcontainer div.wrap-button-icon > div.sub-svg {
	transform: rotate(5deg) scale(1.2);
	transform-origin: center center;
	transition: all 0.2s 0.1s ease-in-out;}	

div.wrap-button-icon > div.sub-svg svg {
	position: absolute;
	top: 0%; left: 0;
	width: 100%; height: 100%;}

/* Icon-Groessen */
div.wrap-button-icon.iconsize-1 {
	min-height: 70px;}
div.wrap-button-icon.iconsize-2 {
	min-height: 100px;}
div.wrap-button-icon.iconsize-3 {
	min-height: 140px;}

	/* START TABLET */
	@media only screen and (min-width: 700px) {
		div.wrap-button-icon.iconsize-1 {
			min-height: 80px;}
		div.wrap-button-icon.iconsize-2 {
			min-height: 120px;}
		div.wrap-button-icon.iconsize-3 {
			min-height: 160px;}
	}
	/* START DESKTOP 1 */
	@media only screen and (min-width: 1100px) {
		div.wrap-button-icon.iconsize-1 {
			min-height: 90px;}
		div.wrap-button-icon.iconsize-2 {
			min-height: 140px;}
		div.wrap-button-icon.iconsize-3 {
			min-height: 180px;}
	}

/* Icon-Schattierungen */
div.wrap-button-icon.iconshadow svg {
	filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.8));}
	


/*---------------------------------------------------------------------------------------------------------------
WRAP-SET VERSCHACHTELUNGEN - WUNSCHLISTE als Ergaenzung zu .wrap-imagelink
--------------------------------------------------------------------------------------------------------------- 
div.wrap-imagelink.wrap-wishlist-01 (.div-corner)
		div.sub-status > div > div		nur Wunschliste
*/
div.wrap-wishlist-01 > .sub-path {
	margin: var(--div-box);}

div.wrap-wishlist-01 > .sub-txt {
	margin: var(--div-box);}



/*---------------------------------------------------------------------------------------------------------------
WRAP-SET VERSCHACHTELUNGEN - PORTRAIT
--------------------------------------------------------------------------------------------------------------- 

set-portrait-01
	.content-img
	.content-gr
	.pathtouch siehe unter basic.css
	.content-txt
	.content-link
*/


/*
div.sub-portrait-01 div.content-img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover; background-repeat: no-repeat;
	transition: all 0.5s 0.5s ease-in-out;}
div.sub-portrait-01:hover div.content-img { 
	transform: rotate(-1deg) scale(1.075);
	transition: all 0.5s 0.25s ease-in-out;}
		
div.sub-portrait-01 div.content-img div.content-gr {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%; height: 30%;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
	transition: all 0.5s 0.25s ease-in-out;}
	
div.sub-portrait-01 div.content-txt {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%; height: auto;}

div.sub-portrait-01 div.content-link {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;}

*/

	/* START TABLET */
	@media only screen and (max-width: 1000px) {
	}	
	/* START SMARTPHONE */
	@media only screen and (max-width: 700px) {
	}