@charset "utf-8";
/* CSS Document */


/* h1 Header */

@font-face {
	
	font-family: "KappaHeavy";
	unicode-range: U+000-5FF;	/*  Latin glyphs  */
    
    /* IE9 */
	src: url("/fonts/KappaVol2D-Black/black/KappaVol2D-Black.eot");
	src:
        /* IE6 - IE8 */
		url("/fonts/KappaVol2D-Black/black/KappaVol2D-Black.eot?#iefix") format("embedded-opentype"),
        /* Webfont (moderne Browser) */
		url("/fonts/KappaVol2D-Black/black/KappaVol2D-Black.woff") format("woff"),
        /* Safari, Android, iOS */
		url("/fonts/KappaVol2D-Black/black/KappaVol2D-Black.ttf") format("truetype");
	font-display: swap;
}

/* h2 Header */

@font-face {
	
	font-family: "KappaLight";
	unicode-range: U+000-5FF;	/*  Latin glyphs  */
	
	/* IE9 */
    src: url("/fonts/KappaVol2D-Light/light/KappaVol2D-Light.eot");
	src:
        /* IE6 - IE8 */
		url("/fonts/KappaVol2D-Light/light/KappaVol2D-Light.eot?#iefix") format("embedded-opentype"),
        /* Webfont (moderne Browser) */
		url("/fonts/KappaVol2D-Light/light/KappaVol2D-Light.woff") format("woff"),
        /* Safari, Android, iOS */
		url("/fonts/KappaVol2D-Light/light/KappaVol2D-Light.ttf") format("truetype");
	font-display: swap;
}


/* Fliesstext regular*/

@font-face {
	font-family: "Faustina";
	font-style: normal;
    font-weight: normal;


	src: url("/fonts/Faustina/faustina-v4-latin-regular.eot"); /* IE9 */
	src: local("Faustina Regular"), local("Faustina-Regular"),
	  
		url("/fonts/Faustina/faustina-v4-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("/fonts/Faustina/faustina-v4-latin-regular.woff2") format("woff2"), /* Supermoderne Browser */
		url("/fonts/Faustina/faustina-v4-latin-regular.woff") format("woff"), /* Moderne Browser */
		url("/fonts/Faustina/faustina-v4-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */
		url("/fonts/Faustina/faustina-v4-latin-regular.svg#Faustina") format("svg"); /* Legacy iOS */
	font-display: swap;
	text-rendering: optimizeLegibility;
}

/* italic  */

@font-face {
	font-family: "Faustina";
	font-style: italic;
    font-weight: normal;
	
	src: url("/fonts/Faustina/faustina-v4-latin-italic.eot"); /* IE9 Compat Modes */
	src: local("Faustina Italic"), local("Faustina-Italic"),
	  
       url("/fonts/Faustina/faustina-v4-latin-italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("/fonts/Faustina/faustina-v4-latin-italic.woff2") format("woff2"), /* Super Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-italic.woff") format("woff"), /* Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-italic.ttf") format("truetype"), /* Safari, Android, iOS */
       url("/fonts/Faustina/faustina-v4-latin-italic.svg#Faustina") format("svg"); /* Legacy iOS */
	font-display: swap;
	text-rendering: optimizeLegibility;
}

/* bold */

@font-face {
	font-family: "Faustina";
    font-weight: bold;
	
	src: url("/fonts/Faustina/faustina-v4-latin-700.eot"); /* IE9 Compat Modes */
	src: local("Faustina Bold"), local("Faustina-Bold"),
	  
       url("/fonts/Faustina/faustina-v4-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("/fonts/Faustina/faustina-v4-latin-700.woff2") format("woff2"), /* Super Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-700.woff") format("woff"), /* Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */
       url("/fonts/Faustina/faustina-v4-latin-700.svg#Faustina") format("svg"); /* Legacy iOS */
	font-display: swap;
	text-rendering: optimizeLegibility;
}

/* bold italic */

@font-face {
	font-family: "Faustina";
	font-style: italic;
	font-weight: bold;
	
	src: url("fonts/Faustina/faustina-v4-latin-700italic.eot"); /* IE9 Compat Modes */
	src: local("Faustina Bold Italic"), local("Faustina-BoldItalic"),
	  
       url("/fonts/Faustina/faustina-v4-latin-700italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("/fonts/Faustina/faustina-v4-latin-700italic.woff2") format("woff2"), /* Super Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-700italic.woff") format("woff"), /* Modern Browsers */
       url("/fonts/Faustina/faustina-v4-latin-700italic.ttf") format("truetype"), /* Safari, Android, iOS */
       url("/fonts/Faustina/faustina-v4-latin-700italic.svg#Faustina") format("svg"); /* Legacy iOS */
	font-display: swap;
	text-rendering: optimizeLegibility;
}


/* Hauptnavigation */

@font-face {
	font-family: "Tomkin";
	font-style: italic;
    font-weight: normal;
	
	src: url("/fonts/Tomkin/regular/Tomkin-Italic.eot"); /* IE9 Compat Modes */
	src: 
        url("/fonts/Tomkin/regular/Tomkin-Italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("/fonts/Tomkin/regular/Tomkin-Italic.woff") format("woff"), /* Modern Browsers */
        url("/fonts/Tomkin/regular/Tomkin-Italic.ttf") format("truetype"), /* Safari, Android, iOS */
        url("/fonts/Faustina/faustina-v4-latin-italic.svg#Faustina") format("svg"); /* Legacy iOS */
	font-display: swap;
	text-rendering: optimizeLegibility;
}


html {box-sizing: border-box; width: 100%; max-width: 100vw; min-width: 0; margin: 0; overflow-x: hidden;}

*,
*:before,
*:after {box-sizing: inherit;}



/*  Hintergrundfarbe, Hintergrundbild Streifen  */

body {
	box-sizing: border-box;
	width: 100%;
	max-width: 100vw;
	min-width: 0;
	background-image: url("/Bilder/bg.svg");
	background-size: 60px 1098px;
	background-repeat: repeat-y;
	background-position: right, top !IMPORTANT;
	background-color: #E0DEDB;
	margin: 0;
	
	-webkit-font-smoothing: subpixel-antialiased;
	font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1, "liga" 1, "dlig" 1;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
    font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.main {
	box-sizing: border-box;
	width: 100%;
	max-width: 100vw;
	margin: 0;
	/* overflow: hidden; */
}


/*  Typo und globale Entscheidungen  */

h1 {
	font-family: "KappaHeavy", "Helvetica", Helvetica, Arial, "sans-serif";
    font-size: calc(2rem + 2vw);
	color: #607974;
	line-height: 100%;
	margin-bottom: 2rem;
	/*	border-bottom: 17px solid #607974;	*/
}

h2 {
	font-family: "KappaLight", "Helvetica", Helvetica, Arial, "sans-serif";
    font-size: calc(2rem + 2vw);
	color: #607974; 
}

h3 {
	font-family: "Tomkin", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: italic;
	font-weight: 400;
	font-size: calc(1rem + 1vw);
	word-spacing: 0.1em;
	column-span: all;
	margin: 9vw 2vw 9vw 5vw;
}

h4 {
	font-family: "Tomkin", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 400;
	font-size: 110%;
	font-feature-settings: "ss01" 0;
}

em {
	font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: italic;
	font-weight: 400;
	-webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
	hyphens: auto;
	color: #453c4c;
}

p {color: #453c4c; max-width: 100%; margin: 0;}

p .center {align-content: center;}

img {width: 100%; height: auto;}

.floated {float: left;}

.col {column-span: all;}

figcaption {
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
    font-style: normal;
	font-size: 0.9em;
	color: #607974;
    margin-top: 5px;
}

.margimg {
	max-width: 100%;
	height: auto; object-fit: contain; object-position: 50% 50%;
	mix-blend-mode: multiply;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.margimg_2 {
	max-width: 100%;
	height: auto; object-fit: contain; object-position: 50% 50%;
	mix-blend-mode: multiply;
	display: block;
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
    font-style: normal;
	font-size: 0.9em;
	color: #607974;
	text-align: center;
}

sup {
    font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
    font-size: 1em;
    color: #b24c2c;
    vertical-align: top; position: relative; top: -0.3em; 
}

.supmarg {
	font-size: 1.2em;
    vertical-align: top; position: relative;
    color: #b24c2c;
}

a {
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 600;
	font-size: 2.1ex;
	line-height: 2.7ex;
	color: #b24c2c;
	text-decoration: none;
}

a:hover {color: #607974;}

a:visited {color: darkred;}

a.navpfeil {
		position: absolute;
		width: 15px;
		height: 30px;
		left: 3vw;
		cursor: pointer;
		padding: 8px 0 0 0;
		margin: 0;
	}

a.navpfeil:hover {
		color: #E0DEDB !IMPORTANT;
		background-color: #B24C2C;
		position: absolute;
		width: 15px;
		height: 30px;
		left: 3vw;
		cursor: pointer;
		padding: 8px 0 0 0;
		margin: 0;
		border-radius: 0;
		display: inline-block;
	}

#slide_GARNELE, #slide_RP, #slide_CONE, #slide_FISCH, #slide_FOTO, #slide_FOOD, #slide_ATMO 
{max-width: 100%; box-sizing: border-box;}

.slide_BU {
	max-width: 100%;
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
	font-size: 0.9em;
	line-height: 2.9ex;
	color: #607974;
	margin: 5px 0 0 0;
}

.BUzitat {
	max-width: 100%;
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
	font-size: 0.9em;
	line-height: 2.9ex;
	color: #607974;
	margin: 5px 0 10vw 5vw;
}


/* Registerhaltige Spalten - 1spaltig für kleine viewports  */

.text {
	font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 400;
	-webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
 	hyphens: auto;
	color: #453c4c;
}

.text a {
	font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 400;
	color: #b24c2c;
    font-size: 1em;
	text-decoration: none;
}

.text a:hover {color: #607974 !important;}

.text a:visited {color: darkmagenta;}

.text_mtop {
	font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 400;
	-webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
 	hyphens: auto;
	color: #453c4c;
    margin-top: 10vw
}

.spalte a {
	font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
	font-style: normal;
	font-weight: 400;
	color: #b24c2c;
    font-size: 1em;
	text-decoration: none;
}

.spalte a:hover {color: #607974 !important;}

.spalte a:visited {color: darkmagenta;}

video {margin: 6vw 0 0 0;}


/*  Mobile Version - all-in ab 300px */

@media screen and (min-width: 300px)
{
	.main {
		display: grid;
		grid-template-columns: 3vw minmax(0, 1fr) 15vw;
		grid-template-areas:
			
		"top-links			top-links				    top-links"
		"top-rechts			top-rechts		 		   	top-rechts"
		"nav				nav						    nav"
		".					content_intro	  		  	."
		"intro_pics			intro_pics					."
		".					marg_intro	    		    ."
		".					content_edi_INTRO		   	."
		".					marg_edi_INTRO	    	    ."
		".					content_edi_GARNELE			."
		"slide_GARNELE		slide_GARNELE				slide_GARNELE"
		".					marg_slide_GARNELE			."
		".					marg_edi_GARNELE			."
		".					margimg_GARNELE				."
		".					content_edi_RP	    		."
		"slide_RP			slide_RP		    		slide_RP"
		".					marg_edi_RP		    		."
        ".					marg_slide_RP				."
		".					content_CONE	    		."
		"slide_CONE			slide_CONE		    		slide_CONE"
		".					marg_slide_CONE	    		."
		".					marg_edi_CONE				."
		".					content_edi_FISCH			."
		"slide_FISCH		slide_FISCH		     	  	slide_FISCH"
		".					marg_slide_FISCH			."
		".					marg_content_FISCH			."
		".					content_FALS	    		."
		".					marg_FALS		    		."
		".					content_foto_INTRO			."
		"edi_pics			edi_pics					."
		".					content_por					."
		"slide_FOTO			slide_FOTO		    		slide_FOTO"
		".					marg_slide_PORTRAIT			."
		".					marg_slide_PORTRAIT_BU		."
		".					marg_foto_INTRO				."
		".					content_food_INTRO  	  	."
		"slide_FOOD			slide_FOOD    	    	    slide_FOOD"
		".					marg_slide_FOOD				."
		".					marg_food_INTRO				."
		".					content_atmo_INTRO   	 	."
		"slide_ATMO			slide_ATMO					slide_ATMO"
		".					marg_slide_ATMO				."
		".					marg_slide_ATMO_2			."
		".					marg_atmo_INTRO				."
		".					content_WebDesign_INTRO	 	."
		"slide_WEB_1		slide_WEB_1					slide_WEB_1"
		".					content_web_1				."
		"slide_WEB_2		slide_WEB_2					slide_WEB_2"
		".					content_web_2				."
		"slide_WEB_3		slide_WEB_3					slide_WEB_3"
		".					content_web_3				."
		".					marg_WebDesign_INTRO		."
		".					marg_WebDesign				."
		".					marg_WebDesign_1			."
		".					marg_WebDesign_2			."
		;
	}
	
	
	
	/* Navbar mobil */
	
	.landing {display: none;}
	
	.row {
		grid-area: nav;
		display: block;
		position: sticky;
		top: 30px;
		mix-blend-mode: luminosity;
		z-index: 110;
	}
	
	.row a {
		display: block;
		text-align: center;
		padding: 10px 0;
		/* color: #9c4226; mix-blend-mode .row = luminosity */
	}
	
	.row ul {
		list-style-type: none; /* ohne bullets */
		padding: 0;
		margin: 0;
	}
 
	label.hamburg {
		display: block;
		width: 75px;
		height: 50px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		border-radius: 4px;
		cursor: pointer;
	}
 
	.line {
		position: absolute;
		left: 20px;
		height: 5px;
		width: 35px;
		background: #9c4226;
		border-radius: 2px;
		display: block;
		transition: 0.5s;
		transform-origin: center;
	}
 
	.line:nth-child(1) { top: 12px; }
	.line:nth-child(2) { top: 24px; }
	.line:nth-child(3) { top: 36px; }
 
	#hamburg:checked + .hamburg .line:nth-child(1) {
		transform: translateY(12px) rotate(-45deg);
	}
 
	#hamburg:checked + .hamburg .line:nth-child(2) {opacity:0;}
 
	#hamburg:checked + .hamburg .line:nth-child(3) {
		transform: translateY(-12px) rotate(45deg);
	}
 
	nav.burgermenu {
		background-color: #e0dedb;
		height: auto; 
    	max-height:0; 
    	overflow: hidden; 
    	transition: all 0.5s;
	}
 
	#hamburg:checked + .hamburg  + nav.burgermenu {max-height: 600px;}
    
	input#hamburg {display: none;}
	
    
/*  Navbar - Link Overlay - kleinerer Viewport */
	
	nav a:hover {background-color: #607974; color: #b24c2c;}
	
	nav a {color: #2d2c2c;}
	
	h1 h2 {margin: 15vw 0 0 0;}
	
	figure {margin: 15vw 0;}
	
	.GARprov {max-width: 100px;}
	
	
	
/*  Marginalien */
	
	.margcont_intro_1, .margcont_intro_2, .margcont_intro_3, .margcont_intro_4, .marggal_edi_start, .marg_edi_GARNELE, .margimg_GARNELE, .marg_slide_GARNELE,  
	.margcont_edi_1, .margcont_edi_2, .margslide_RP, .marggal_edi_CONE, .margcont_edi_4, .margcont_edi_5, .margcont_edi_6, 
	.margcont_edi_7, .margslide_CONE, .marggal_FISCH, .margcont_edi_8, .margslide_FISCH, .marggal_foto_start, .margcont_edi_9, 
	.marg_slide_PORTRAIT, .marg_slide_PORTRAIT_BU, .margimg_2, .marggal_FOOD, .margslide_FOOD_1, .margslide_FOOD_2, 
	.margcont_foto_1, .margcont_foto_1a, .margcont_foto_2, .marg_atmo_INTRO, .marg_slide_ATMO, .marg_slide_ATMO_2, 
	.marg_WebDesign_INTRO, .marg_WebDesign, .marg_WebDesign_1, .marg_WebDesign_2 
	{
	max-width: 100%;
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
	font-size: 0.9em;
	line-height: 2.9ex;
	color: #607974;
}
	
	
	.margcont_edi_6 {mix-blend-mode: multiply;}
	
	.margimg_GARNELE {mix-blend-mode: multiply; text-align: center;}
	
	
/* Hauptcontent - Grid Postionen */
	
	#start {grid-area: top-links;}
	
	.top-rechts {grid-area: top-rechts; mix-blend-mode: multiply;}
	
	.top-links {grid-area: top-links; mix-blend-mode: multiply;}
	
	#content_intro {grid-area: content_intro;}
	
	.intro_pics_s {grid-area: intro_pics; width: 100% !IMPORTANT; height: auto;}
    
	.margcont_intro_1 .margcont_intro_2 .margcont_intro_3 .margcont_intro_4 {grid-area: marg_intro;}
	
	#content_edi_INTRO {grid-area: content_edi_INTRO;}
	
	.marggal_edi_start .margcont_edi_1 {grid-area: marg_edi_INTRO;}
	
	#content_edi_GARNELE {grid-area: content_edi_GARNELE;}
	
	#slide_GARNELE {grid-area: slide_GARNELE;}
	
	.marg_slide_GARNELE {grid-area: marg_slide_GARNELE;}
	
	.marg_edi_GARNELE {grid-area: marg_edi_GARNELE;}
	
	.margimg_GARNELE {grid-area: margimg_GARNELE;}
	
	#content_edi_RP {grid-area: content_edi_RP;}
    
	.marg_edi_RP {grid-area: marg_edi_RP;}
	
	.margcont_edi_2 {grid-area: marg_edi_RP;}
    
    #slide_RP {grid-area: slide_RP;}
	
	.margslide_RP {grid-area: marg_slide_RP;}
	
	.marggal_edi_CONE {grid-area: marg_edi_CONE;}
	
	.margcont_edi_4 {grid-area: marg_edi_CONE; text-align: center;}
	
	.margcont_edi_5 {grid-area: marg_edi_CONE;}
    
	.margcont_edi_6 {grid-area: marg_edi_CONE; text-align: center;}
 
    .margcont_edi_7 {grid-area: marg_edi_CONE;}
	
	#slide_CONE {grid-area: slide_CONE;}
	
	.margslide_CONE {grid-area: marg_slide_CONE;}
	
	.marggal_FISCH {grid-area: marg_content_FISCH;}
    
    .margcont_edi_8 {grid-area: marg_content_FISCH;}
	
	.margslide_FISCH {grid-area: marg_slide_FISCH;}
	
    .margcont_edi_9 {grid-area: marg_FALS;}
    
    .marggal_foto_start {grid-area: marg_foto_INTRO;}
	
	.margcont_foto_1 {grid-area: marg_foto_INTRO;}
	
	.margcont_foto_1a {grid-area: marg_foto_INTRO;}
	
	.marg_slide_PORTRAIT {grid-area: marg_slide_PORTRAIT;}
	
	.marg_slide_PORTRAIT_BU {grid-area: marg_slide_PORTRAIT_BU;}
    
    .margcont_foto_2 {grid-area: marg_food_INTRO;}
	
	.margslide_FOOD_2 {grid-area: marg_slide_FOOD;}
	
	.margslide_FOOD_1 {grid-area: marg_slide_FOOD;}
	
	.marggal_FOOD {grid-area: marg_food_INTRO;}
	
	.marg_intro {grid-area: marg_intro;}
	
	.marg_edi_INTRO {grid-area: marg_edi_INTRO;}
	
	.marg_edi_CONE {grid-area: marg_edi_CONE;}
	
	.marg_slide_CONE {grid-area: marg_slide_CONE;}
	
	.marg_content_FISCH {grid-area: marg_content_FISCH;}
    
    #slide_FISCH {grid-area: slide_FISCH;}
	
	.marg_slide_FISCH {grid-area: marg_slide_FISCH;}
	
	.marg_FALS {grid-area: marg_FALS;}
	
	.marg_foto_INTRO {grid-area: marg_foto_INTRO;}
	
    #slide_FOTO {grid-area: slide_FOTO;}
	
	.marg_food_INTRO {grid-area: marg_food_INTRO;}
	
    #slide_FOOD {grid-area: slide_FOOD;}
	
	.marg_slide_FOOD {grid-area: marg_slide_FOOD;}
	
	#content_CONE {grid-area: content_CONE;}
	
	#content_edi_FISCH {grid-area: content_edi_FISCH;}
	
	#slide_FISCH {grid-area: slide_FISCH;}
	
	#content_FALS {grid-area: content_FALS;}
	
	#content_foto_INTRO {grid-area: content_foto_INTRO;}
	
	.edi_pics_s {grid-area: edi_pics; width: 100% !IMPORTANT; height: auto;}
	
	.content_por_INTRO {grid-area: content_por;}
	
	#content_food_INTRO {grid-area: content_food_INTRO;}
	
	#content_atmo_INTRO {grid-area: content_atmo_INTRO;}
	
	#slide_ATMO {grid-area: slide_ATMO;}
	
	.marg_slide_ATMO {grid-area: marg_slide_ATMO;}
	
	.marg_slide_ATMO_2 {grid-area: marg_slide_ATMO_2;}
	
	.marg_atmo_INTRO {grid-area: marg_atmo_INTRO;}
	
	#content_WebDesign_INTRO {grid-area: content_WebDesign_INTRO;}
	
	#slide_WEB_1 {grid-area: slide_WEB_1;}
	
	.content_web_1 {grid-area: content_web_1;}
	
	#slide_WEB_2 {grid-area: slide_WEB_2;}
	
	.content_web_2 {grid-area: content_web_2;}
	
	#slide_WEB_3 {grid-area: slide_WEB_3;}
	
	.content_web_3 {grid-area: content_web_3;}
	
	.marg_WebDesign_INTRO {grid-area: marg_WebDesign_INTRO;}
	
	.marg_WebDesign {grid-area: marg_WebDesign;}
	
	.marg_WebDesign_1 {grid-area: marg_WebDesign_1;}
	
	.marg_WebDesign_2 {grid-area: marg_WebDesign_2;}
	
}



/* 	Mobile - nur bis 767px */

@media screen and (max-width: 767px) 	
{
	
	
	nav {
		border-top: 1px solid;
		border-top-color: #b24c2c;
		border-bottom: 1px solid;
		border-bottom-color: #b24c2c;
	}
    
	.nav {display: none;}
	
	h1 {margin: 40vw 0 0 0;}
	
	h2 {margin: 30vw 0 0 0;}
	
	.luft {margin-top: 10vw !IMPORTANT;}
	
	.luft_2x {margin-top: 20vw;}
	
	.luft_li {margin: 0 0 0 2vw;}
	
	.slide {margin: 15vw 3vw; align-content: center;}
	
	#slide_RP {margin: 10vw 3vw 15vw 3vw !IMPORTANT;}
	
	#slide_CONE {margin: 0 3vw 15vw 3vw !IMPORTANT;}
	
	.cite {margin-bottom: 10vw !IMPORTANT;}
	
	
	
/*  Mobile Marg Fußtext - linker Abstand */	
	
	.margcont_intro_1, .margcont_intro_2, .margcont_intro_3, .margcont_intro_4, .marggal_edi_start, .marg_edi_GARNELE, .marg_slide_GARNELE,  
	.margcont_edi_1, .margcont_edi_2, .margslide_RP, .marggal_edi_CONE, .margcont_edi_4, .margcont_edi_5, .margcont_edi_6, 
	.margcont_edi_7, .margslide_CONE, .marggal_FISCH, .margcont_edi_8, .margslide_FISCH, .marggal_foto_start, .margcont_edi_9, 
	.marg_slide_PORTRAIT, .marg_slide_PORTRAIT_BU, .marggal_FOOD, .margslide_FOOD_1, .margslide_FOOD_2, .margcont_foto_1, .margcont_foto_1a, 
	.margcont_foto_2, .marg_atmo_INTRO, .marg_slide_ATMO, .marg_slide_ATMO_2, .marg_WebDesign_INTRO, .marg_WebDesign, .marg_WebDesign_1,
	.marg_WebDesign_2
	{margin: 0 0 0 3vw;}
	
	.CONEprov {width: 30%;}
	
	.GARprov {max-width: 40%;}
	
	
	
/*  SLIDESHOWS bis 760px - mit Vergrösserung - Standard */
    
	.scalable {width: 100%; margin: 0; height: auto; object-fit: contain; object-position: 50% 50%;}
	
	.scalable_thumb {width: 100%; height: auto; object-fit: contain; object-position: 50% 50%;}
	
	.margimg {width: 100%; height: auto; object-fit: contain; object-position: 50% 50%;}
	
	.thumb-list .inner {display: none;}
	
	.featured-wrapper {position: relative;}
	
	.featured-wrapper .featured-list {display: grid; padding: 0; align-content: center;}
	
	.featured-wrapper .featured-list li {
		grid-column: 1;
		grid-row: 1;
		opacity: 0;
		transition: opacity 0.25s;
	}
	
	.slide .featured-wrapper .arrows label::before {
		position: absolute;
		top: 110%;
		left: 5%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		border-radius: 30%;
		color: #607974;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-color: #E0DEDB;
		opacity: 0.8;
		transition: opacity 0.25s;
	}
	
	.slide .featured-wrapper .arrows label::after {
		position: absolute;
		top: 110%;
		right: 12%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		border-radius: 30%;
		color: #607974;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-color: #E0DEDB;
		opacity: 0.8;
		transition: opacity 0.25s;
	}
	
	.slide .featured-wrapper .dots {
		position: absolute;
		left: 41%;
		transform: translateX(-50%);
		display: flex;
	}
	
	/* #slide ATMO .featured-wrapper .dots label {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #607974;
	transition: background 0.25s;
	} */
	
	#slide_FOTO .featured-wrapper .arrows label::before {top: 105%; left: 3vw;}
	
	#slide_FOTO .featured-wrapper .arrows label::after {top: 105%; right: 10vw;}
	
	#slide_ATMO .featured-wrapper .arrows label::before {left: 0;}
	
	#slide_ATMO .featured-wrapper .arrows label::after {right: 6vw;}
	
	
	
/* DOTS - Abstand untereinander */
	
	.slide .featured-wrapper .dots li:not(:last-child) {margin-right: 4px;}
	
	
	
/* Slides - Thumbs bis 760px */
	
	#slide_FOTO .thumb-list {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 1em;
	margin-top: 3.5em;
	padding: 0;
	}	
	
	#slide_FOOD .thumb-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1em;
	margin-top: 3.5em;
	padding: 0;
	}
	
	#slide_GARNELE .thumb-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 1em;
	margin-top: 3.5em;
	padding: 0;
	}
	
	#slide_ATMO .thumb-list {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 0.7em;
	margin-top: 3.5em;
	padding: 0;
	}
	
	.slide img {
		align-content: center;
		width: 100%;
		height: auto;
		background-color: #E0DEDB; 
	}
	
	h3 {margin: 25vw 6vw 25vw 7vw; font-size: calc(1.1rem + 1.1vw);}
	
	.text_mtop {margin: 25vw 0 0 0;}
	
}



@media screen and (orientation: landscape) 
{
	/* Portrait Slide reduziert in Landscape */
	
	#portrait img {
		display: block;
		max-width: 45vw;
		margin-left: auto;
		margin-right: auto;
		height: auto;
    	background-color: #E0DEDB;
	}
	
	/* Irka reduziert in Landscape */
	
	#irka {
		display: block;
		max-width: 65%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
	}
	
	/* Irka BU */
	
    .irka {
		display: block;
		max-width: 65%;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Angi reduziert in Landscape */
	
	#angi {
		display: block;
		max-width: 65%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
	}
	
	/* Angi BU */
	
    .angi {
		display: block;
		max-width: 65%;
		margin-left: auto;
		margin-right: auto;
	}
	
	
}



/* Full Screen ~ getestet 1280x800 */

@media screen and (min-width: 768px)
{
	.main {
		display: grid;
		grid-template-rows: [landing-start] auto [landing-end_nav-start] 36px [nav-end_content-start] auto [content-end] !IMPORTANT;
		grid-template-columns: [landing-links-start] 6vw [frame-links-end_fliesstext-start] 1fr [fliesstext-end_marginalie-start] 18vw [marginalie-end_frame-rechts-start] 4vw [landing-rechts-end];
		grid-column-gap: 1em;
		grid-template-areas:
		
		"landing		landing						landing						landing"
		"nav			nav							nav							nav"
		".				content_intro    			marg_intro					."
		".				intro_pics					marg_intro					."
		".				content_edi_INTRO			marg_edi_INTRO				."
		".				content_edi_GARNELE			margimg_GARNELE				."
		".				content_edi_GARNELE			marg_edi_GARNELE			."
		".				slide_GARNELE				marg_slide_GARNELE			."
		".				content_edi_RP				marg_edi_RP					."
		".				slide_RP      	  	 	 	marg_slide_RP				."
		".				content_CONE      			marg_edi_CONE				."
		".				slide_CONE     	  		 	marg_slide_CONE				."
		".				content_edi_FISCH			marg_content_FISCH			."
		".				slide_FISCH      			marg_slide_FISCH			."
		".				content_FALS      			marg_FALS					."
		".				content_foto_INTRO			marg_foto_INTRO				."
		".				edi_pics					marg_foto_INTRO				."
		".				content_por					marg_foto_INTRO				."
		".				slide_FOTO					marg_slide_PORTRAIT			."
		".				content_food_INTRO			marg_food_INTRO				."
		".				slide_FOOD		   			marg_slide_FOOD				."
		".				content_atmo_INTRO			marg_atmo_INTRO				."
		".				slide_ATMO			   		marg_slide_ATMO				."
		".				content_WebDesign_INTRO		marg_WebDesign_INTRO		."
		".				slide_WEB_1			   		marg_WebDesign				."
		".				content_web_1			   	marg_WebDesign_1			."
		".				slide_WEB_2			   		marg_WebDesign_1			."
		".				content_web_2			   	marg_WebDesign_2			."
		".				slide_WEB_3				   	marg_WebDesign_2			."
		".				content_web_3			   	marg_WebDesign_2			."	
		;
		
		grid-auto-rows: auto;
	}
	
	/*hmtl {grid-column: span 4;}*/
	
	#start {grid-area: landing; height: auto;}
	
	#start picture {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		width: auto;
		max-width: 100%;
		height: auto;
	}
	
	#start img {display: block; object-fit: cover; width: 100%; max-width: 100%;  height: auto;}
	
	.landing {grid-area: landing; display: block; width: 100%; height: auto; margin: 0; mix-blend-mode: multiply;}
	
	.top-rechts, .top-links {display: none;}
	
	.cite_end {margin-bottom: 10vw !IMPORTANT;}
	
    
	
/*  Navbar und Fold  */
	
	.nav {
		grid-area: nav;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		overflow-y: hidden;
		position: sticky;
		max-width: 100vw;
		height: 30px;
		background-color: #B24C2C;
		top: 30px;
		mix-blend-mode: multiply;
		z-index: 110;
	}
	
	nav ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		max-width: 100%;
		list-style-type: none;
		height: 30px;		
	}
	
	nav li {
		float: right;
		display: block;
		padding: 8px 10px 0 0;
		line-height: 30px;
	}
	
	nav a {
		text-decoration: none;
		color: #E0DEDB;
		font-family: 'Tomkin', 'Helvetica', Helvetica, sans-serif;
		font-style: italic;
		font-size: 0.8em;
		letter-spacing: 0.04em;
		padding: 0 10px 10px 10px;
		margin: 0 4vw 0 0;
		height: 30px;
		line-height: 30px;
		cursor: help;
	}
	
	nav a:visited {color: #E0DEDB;} 
	
	nav a:hover {
		color: #B24C2C;
		background-color: #ffffff;
		padding: 0 10px 10px 10px;
		display: inline-block;
		border-radius: 5px;
	}
	
	.row {display: none;}
	
	
/*  Typografie  */
	
	body {font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1600 - 300)));}
	
	.spalte {
		font-family: "Faustina", "Helvetica", Helvetica, Arial, "sans-serif";
		color: #453c4c;
		-webkit-column-count: 2;
		column-count: 2;
		column-gap: 1.5em;
		-webkit-column-width: 270px;
		column-width: 270px;
	}
	
	h1 {
		margin: 15vw 0 0 0;
		border-bottom: 14px solid #607974;
	} 
	
	h2 {margin: 10vw 0 0 0;}
	
	h3 {padding: 10vw 0 10vw 5vw; margin: 0 -15vw 0 0;}
	
	.tight {padding: 10vw 0 10vw 3vw; word-spacing: 0;}
	
	.tightBU {padding: 10vw 0 0 3vw; word-spacing: 0;} 
	
	figure {margin: 5vw 0;}
	
	.featured-wrapper .arrows label::before {left: -6.5vw;}
	
	.featured-wrapper .arrows label::after {right: -5.5vw;}
	
	#slide_RP, #slide_FISCH, #slide_FOTO, #slide_FOOD, #slide_GARNELE, #slide_ATMO, #slide_WEB_1, #slide_WEB_2  {
        margin: 3vw 0 5vw 0;
		box-sizing: border-box;
		position: relative;
	}
	
	
	
/* Korrektur min. 760px - ARROWS */
	
	.slide .featured-wrapper .arrows label::before {
		z-index: 100;
		position: absolute;
		top: 50%;
		left: -8%;
		transform: translateY(-50%);
		width: 30px;
		height: 20px;
		border-radius: 30%;
		color: #607974;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 30px 30px;
		background-color: #E0DEDB;
		opacity: 0.8;
		transition: opacity 0.25s;
	}
	
	.slide .featured-wrapper .arrows label::after {
		z-index: 100;
		position: absolute;
		top: 50%;
		right: -7%;
		transform: translateY(-50%);
		width: 30px;
		height: 20px;
		border-radius: 30%;
		color: #607974;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 30px 30px;
		background-color: #E0DEDB;
		opacity: 0.8;
		transition: opacity 0.25s;
	}
	
	#slide_FOTO .featured-wrapper .arrows label::before {left: 0;}
	
	#slide_FOTO .featured-wrapper .arrows label::after {right: 0;}
	
	
	
	#slide_RP .thumb-list {
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		grid-gap: 0.7em;
		margin-top: 3em;
		padding: 0;
	}
	
	#slide_FOTO .thumb-list {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-gap: 0.7em;
		margin-top: 3em;
		padding: 0;
	}
	
	#slide_FOOD .thumb-list {
		display: grid;
		grid-template-columns: repeat(10, 1fr) !IMPORTANT;
		grid-gap: 0.7em;
		margin-top: 3em;
		padding: 0;
	}
	
	#slide_ATMO .thumb-list {
		display: grid;
		grid-template-columns: repeat(8, 1fr) !IMPORTANT;
		grid-gap: 0.7em;
		margin-top: 3em;
		padding: 0;
	}
	
	/*	.intro_pics {grid-area: intro_pics;}	ist in media300 enthalten  */
	
	.GARprov {max-width: 60%;}
	
	.CONEprov {width: 35%;}
	
	
	
/*	Hauptcontent - Fliesstext	*/
	
	#content_intro {grid-area: content_intro;}
	
	#content_edi_INTRO {grid-area: content_edi_INTRO;}
	
	.content_edi_INTRO {grid-area: content_edi_INTRO;}
	
	#content_edi_GARNELE {grid-area: content_edi_GARNELE;}
	
	#slide_GARNELE {grid-area: slide_GARNELE;}
	
	#slide_GARNELE .thumb-list {grid-template-columns: repeat(6, 1fr);}
	
	#content_edi_RP {grid-area: content_edi_RP;}
    
    #slide_RP {grid-area: slide_RP;}
	
	#content_CONE {grid-area: content_CONE;}
	
	#slide_CONE {grid-area: slide_CONE;
        margin: 0 0 5vw 0 !important;
		box-sizing: border-box;
		position: relative;
	}
	
	#slide_CONE .thumb-list {grid-template-columns: repeat(10, 1fr);}
	
	#content_edi_FISCH {grid-area: content_edi_FISCH;}
	
    #slide_FISCH {grid-area: slide_FISCH;}
	
	#content_FALS {grid-area: content_FALS;}
	
	#content_foto_INTRO {grid-area: content_foto_INTRO;}
	
	.edi_pics {grid-area: edi_pics;}
	
	.content_por_INTRO {grid-area: content_por;}
	
    #slide_FOTO {grid-area: slide_FOTO;}
	
	#content_food_INTRO {grid-area: content_food_INTRO;}
	
	#slide_FOOD {grid-area: slide_FOOD;}
	
	#slide_FOOD .thumb-list {grid-template-columns: repeat(9, 1fr);}
	
	#content_atmo_INTRO {grid-area: content_atmo_INTRO;}
	
	#slide_ATMO {grid-area: slide_ATMO;}
	
	#content_WebDesign_INTRO {grid-area: content_WebDesign_INTRO;}
	
	#slide_WEB_1 {grid-area: slide_WEB_1;
        margin: 5vw 0 5vw 0 !important;
		box-sizing: border-box;
		position: relative;
	}
	
	.content_web_1 {grid-area: content_web_1;}
	
	#slide_WEB_2 {grid-area: slide_WEB_2;
        margin: 5vw 0 5vw 0 !important;
		box-sizing: border-box;
		position: relative;
	}
	
	.content_web_2 {grid-area: content_web_2;}
	
	#slide_WEB_3 {grid-area: slide_WEB_3;
        margin: 5vw 0 5vw 0 !important;
		box-sizing: border-box;
		position: relative;
	}
	
	.content_web_3 {grid-area: content_web_3;}
	
	/* #slide_WEBDESIGN {grid-area: slide_WEBDESIGN;} */
	
  
    
/* Marginalien */
    
	.marg_intro {
		grid-area: marg_intro;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.margcont_intro_1 {
        grid-area: marg_intro;
		position: relative;
		top: 19vh;
	}
	
	.margcont_intro_2 {
		max-width: 100%;
        grid-area: marg_intro;
		position: relative;
        top: 22%;
	}
	
	.margcont_intro_4 {
        grid-area: marg_intro;
		position: relative;
		top: 40%;
	}
	
	.margcont_intro_3 {
        grid-area: marg_intro;
		position: relative;
		top: 62%;
	}
	
	.marg_edi_INTRO {
		grid-area: marg_edi_INTRO;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.marggal_edi_start {
        grid-area: marg_edi_INTRO;
		position: relative;
		text-align: end;
		top: 8%;
	}
	
	.margcont_edi_1 {
        grid-area: marg_edi_INTRO;
		position: relative;
		top: 85%;
	}
	
	.margimg_GARNELE {
        grid-area: margimg_GARNELE;
		position: relative;
		text-align: center;
		/*padding-left: 1vw;*/
		top: 20%;
	}
	
	.marg_edi_GARNELE {
        grid-area: marg_edi_GARNELE;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 9vh;
	}
	
	.marg_slide_GARNELE {
        grid-area: marg_slide_GARNELE;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 50%;
	}
	
	.margcont_edi_2 {
        grid-area: marg_edi_RP;
		position:relative;
		top: 76%;
	}
    
	.marg_edi_RP {
		grid-area: marg_edi_RP;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.margslide_RP {
        grid-area: marg_slide_RP;
		position:relative;
		top: 55%;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.marg_edi_CONE {
		grid-area: marg_edi_CONE;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.marggal_edi_CONE {
        grid-area: marg_edi_CONE;
		position:relative;
        text-align: end;
		top: 8%;
	}
	
	.margcont_edi_4 {
        grid-area: marg_edi_CONE;
		position:relative;
		text-align: center;
		top: 13%;
	}
	
	.margcont_edi_5 {
        grid-area: marg_edi_CONE;
		position:relative;
		top: 18%;
	}
    
	.margcont_edi_6 {
        grid-area: marg_edi_CONE;
		position:relative;
		text-align: center;
		top: 39%;
	}
	
    .margcont_edi_7 {
        grid-area: marg_edi_CONE;
		position:relative;
		top: 47%;
	}
	
	.marg_slide_CONE {
		grid-area: marg_slide_CONE;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.margslide_CONE {
        grid-area: marg_slide_CONE;
		position:relative;
		top: 55%;
	}
	
	.marg_content_FISCH {
		grid-area: marg_content_FISCH;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
    
	.marggal_FISCH {
        grid-area: marg_content_FISCH;
		position: relative;
		text-align: end;
		top: 13%;
	}
    
    .margcont_edi_8 {
        grid-area: marg_content_FISCH;
		position: relative;
		top: 56%;
	}
	
	.marg_slide_FISCH {
		grid-area: marg_slide_FISCH;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.margslide_FISCH {
        grid-area: marg_slide_FISCH;
		position: relative;
		top: 50%;
	}
	
	.marg_FALS {
		grid-area: marg_FALS;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
    .margcont_edi_9 {
        grid-area: marg_FALS;
		position: relative;
		top: 80%;
	}
    
	.marg_foto_INTRO {
		grid-area: marg_foto_INTRO;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
    .marggal_foto_start {
        grid-area: marg_foto_INTRO;
        position: relative;
	    text-align: end;
		top: 0.5%;
	}
	
	.margcont_foto_1 {
        grid-area: marg_foto_INTRO;
		position: relative;
		top: 37%;
	}
	
	.margcont_foto_1a {
        grid-area: marg_foto_INTRO;
		position: relative;
		top: 74%;
	}
	
	.margimg_2 {
        grid-area: marg_foto_INTRO;
		position: relative;
		padding: 0 1vw;
		top: 74%;
	}
    
    .marg_slide_PORTRAIT {
        grid-area: marg_slide_PORTRAIT;
        position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 5%;
    }
	
	.marg_slide_PORTRAIT_BU {
        grid-area: marg_slide_PORTRAIT;
        position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 40%;
    }
    
	.marg_food_INTRO {
		grid-area: marg_food_INTRO;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.marggal_FOOD {
        grid-area: marg_food_INTRO;
        position: relative;
	    text-align: end;
		top: 8%;
	}
	
    .margcont_foto_2 {
        grid-area: marg_food_INTRO;
        position: relative;
		top: 65%;
	}
	
	.marg_slide_FOOD {
		grid-area: marg_slide_FOOD;
		position: relative;
		float: left;
		padding-left: 1vw;
	}
	
	.margslide_FOOD_2 {
        grid-area: marg_slide_FOOD;
        position: relative;
		top: 7%;
	}
	
	.margslide_FOOD_1 {
        grid-area: marg_slide_FOOD;
        position: relative;
		top: 41%;
	}
	
	.marg_atmo_INTRO  {
		grid-area: marg_atmo_INTRO;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 63%;
	}
	
	.marg_slide_ATMO {
		grid-area: marg_slide_ATMO;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
		top: 5%;
	}
	
	.marg_slide_ATMO_2 {
		grid-area: marg_slide_ATMO;
		top: 55%;
		position: relative;
		float: left;
		/*padding-left: 1vw;*/
	}
	
	.marg_WebDesign_INTRO {
		grid-area: marg_WebDesign_INTRO;
		position: relative;
		float: left;
	    text-align: end;
		top: 31vh;
	}
	
	.marg_WebDesign {
		grid-area: marg_WebDesign;
		position: relative;
		float: left;
		top: 57%;
	}
	
	.marg_WebDesign_1 {
		grid-area: marg_WebDesign_1;
		position: relative;
		float: left;
		top: 65%;
	}
	
	.marg_WebDesign_2 {
		grid-area: marg_WebDesign_2;
		position: relative;
		float: left;
		top: 42%;
	}
	
	/* .marg_slide_WEBDESIGN {
		grid-area: marg_slide_WEBDESIGN;
		position: relative;
		float: left;
		top: 5%;
	} */
	
	/* .marg_slide_WEBDESIGN_2 {
		grid-area: marg_slide_WEBDESIGN;
		top: 53%;
		position: relative;
		float: left;
	} */
	
}


/*  mit Vergrösserung - Standard */

/*.scalable {width: 100%; height: auto; object-fit: contain;}*/

/*.scalable_thumb {width: 100%; height: auto; object-fit: contain;}*/


@media screen and (orientation: portrait)
{
/*	.angimg {width: 100%; height: auto;} */
}	


@media screen and (orientation: portrait) and (min-width: 768px)
{
	
	.main {
		display: grid;
		grid-template-rows: [landing-start] auto [landing-end_nav-start] auto [nav-end_content-start] auto [content-end];
		grid-template-columns: [frame-links-start] 6vw [frame-end_fliesstext-start] 1fr [fliesstext-end_marginalie-start] 17vw [marginalie-end_frame-rechts-start] 5vw [frame-rechts-end];
		grid-column-gap: 1em;
		grid-template-areas:
		
		"landing		landing						landing					landing"
		"nav			nav							nav						nav"
		".				content_intro    			marg_intro				."
		".				intro_pics					marg_intro				."
		".				content_edi_INTRO			marg_edi_INTRO			."
		".				content_edi_GARNELE			margimg_GARNELE			."
		".				content_edi_GARNELE			marg_edi_GARNELE		."
		".				slide_GARNELE				marg_slide_GARNELE		."
		".				content_edi_RP				marg_edi_RP				."
		".				slide_RP      	  		  	marg_slide_RP			."
		".				content_CONE      			marg_edi_CONE			."
		".				slide_CONE     	  		 	marg_slide_CONE			."
		".				content_edi_FISCH			marg_content_FISCH		."
		".				slide_FISCH      			marg_slide_FISCH		."
		".				content_FALS      			marg_FALS				."
		".				content_foto_INTRO			marg_foto_INTRO			."
		".				edi_pics					marg_foto_INTRO			."
		".				content_por					marg_foto_INTRO			."
		".				slide_FOTO					marg_slide_PORTRAIT		."
		".				content_food_INTRO			marg_food_INTRO			."
		".				slide_FOOD		   			marg_slide_FOOD			."
		".				content_atmo_INTRO			marg_atmo_INTRO			."
		".				slide_ATMO		   			marg_slide_ATMO			."
		".				content_WebDesign_INTRO		marg_WebDesign_INTRO	."
		".				slide_WEB_1			   		marg_WebDesign			."
		".				content_web_1			   	marg_WebDesign_1		."
		".				slide_WEB_2			   		marg_WebDesign_1		."
		".				content_web_2			   	marg_WebDesign_2		."
		".				slide_WEB_3				   	marg_WebDesign_2		."
		".				content_web_3			   	marg_WebDesign_2		."
		;
		
		grid-auto-rows: auto;
	}
	
	#start {grid-area: landing; height: auto;}
	
	#start picture {display: block; width: 100vw; height: auto;}
	
	#start img {display: block; object-fit: cover;}
	
	.landing {grid-area: landing; display: block; width: 100vw; margin: 0; mix-blend-mode: multiply;}
	
	.top-rechts, .top-links {display: none;}
	
	.marg_intro, .marg_edi_INTRO, .margimg_GARNELE, .marg_edi_GARNELE, .marg_slide_GARNELE, .marg_edi_RP, .margslide_RP,
	.marg_edi_CONE, .marg_slide_CONE, .marg_content_FISCH, .marg_slide_FISCH, .marg_FALS, .marg_foto_INTRO,
	.marg_slide_PORTRAIT, .marg_slide_PORTRAIT_BU, .marg_food_INTRO, .marg_slide_FOOD, .marg_atmo_INTRO, .marg_slide_ATMO, 
	.marg_slide_ATMO_2, .marg_WebDesign_INTRO, marg_WebDesign, marg_WebDesign_1, marg_WebDesign_2
	{
		padding: 0 1vw 0 0;}
	
	
	.body {width: 100vw; overflow-x: hidden;}
	
	.nav {max-width: 100vw; border-left: none; border-right: none; overflow-x: hidden;}
	
	.top-rechts {
		overflow-x: hidden;
		width: max-content;
		height: auto;
		grid-area: top-rechts;
		mix-blend-mode: multiply;
		margin-left: -9vw; margin-right: 0 !IMPORTANT;
	}
	
	.toprechts picture img {overflow-x: hidden; max-width: 100%;}
	
	
	.margcont_intro_1 {top: 12vh;}
	
	.margcont_intro_2 {top: 25vh;}
	
	.margcont_intro_4 {top: 58vh;}
	
	.margcont_intro_3 {top: 75vh;}
	
	.marggal_edi_start {top: 4vh; padding-right: 1vw;}
	
	.margcont_edi_1 {top: 80vh;}
	
	.margimg_GARNELE {top: 7vh;}
	
	.marg_edi_GARNELE {top: 0;}
	
	.marg_slide_GARNELE {top: 24vh;}
	
	.margcont_edi_2 {top: 94vh;}
	
	.margslide_RP {top: 26vh;}
	
	.marggal_edi_CONE {top: 12vh; padding-right: 1vw;}
	
	.margcont_edi_4 {top: 19vh;}
	
	.margcont_edi_5 {top: 23vh;}
	
    .margcont_edi_7 {top: 77vh;}
	
	.margslide_CONE {top: 22vh;}
    
	.marggal_FISCH {top: 14vh; padding-right: 1vw;}
    
    .margcont_edi_8 {top: 47vh;}
	
	.margslide_FISCH {top: 21vh;}
	
    .margcont_edi_9 {top: 94vh;}
	
    .marggal_foto_start {top: -7vh; padding-right: 1vw;}
	
	.margcont_foto_1 {top: 77vh;}
	
	.margcont_foto_1a {top: 153vh;}
	
	#slide_FOTO .featured-wrapper .arrows label::before {left: -6vw;}
	
	#slide_FOTO .featured-wrapper .arrows label::after {right: -5vw;}
	
	.marg_slide_PORTRAIT_BU {top: 49vh;}
    
    .marg_slide_PORTRAIT {top: 5vh;}
	
	.marggal_FOOD {top: 5vh; padding-right: 1vw;}
	
    .margcont_foto_2 {top: 61vh;}
	
	.margslide_FOOD_2 {top: 4vh;}
	
	.margslide_FOOD_1 {top: 14vh;}
	
	.marg_atmo_INTRO  {top: 57vh;}
	
	.marg_slide_ATMO_2 {top: 27vh;}
	
	.marg_WebDesign {top: 30vh;}
	
	.marg_WebDesign_1 {top: 60vh;}
	
	.marg_WebDesign_2 {top: 60vh;}
	
}



/* Slideshows */

#slide_RP ul, #slide_CONE ul, #slide_FISCH ul, #slide_FOTO ul, #slide_FOOD ul, #slide_GARNELE ul, #slide_ATMO ul, #slide_WEB_1 ul, 
#slide_WEB_2 ul, #slide_WEB_3 ul
{list-style: none;}

#slide_RP img, #slide_CONE img, #slide_FISCH img, #slide_FOOD img, #slide_GARNELE img, #slide_ATMO img, #slide_WEB_1 img, 
#slide_WEB_2 img, #slide_WEB_3 img
{
	display: block;
	max-width: 100%;
	height: auto;
	background-color: #E0DEDB;
}

#slide_RP label, #slide_CONE label, #slide_FISCH label, #slide_FOTO label, #slide_FOOD label, #slide_GARNELE label, 
#slide_ATMO label, #slide_WEB_1 label, #slide_WEB_2 label, #slide_WEB_3 label
{cursor: pointer;}

input[type="radio"] {
	display: none;
	position: absolute;
	bottom: 0;
	left: -9999px;
}

.container {max-width: 100%;}

.featured-wrapper {position: relative;}

.featured-wrapper .featured-list {display: grid; padding: 0;}

.featured-wrapper .featured-list li {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before, .featured-wrapper .arrows label::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 30%;
	color: #607974;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	opacity: 1;
	transition: opacity 0.25s;
}

.featured-wrapper .dots {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	margin-top: 0;
}

.featured-wrapper .dots li:not(:last-child) {margin-right: 5px;}

.featured-wrapper .dots label {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #607974;
	transition: background 0.25s;
}

.featured-wrapper .dots label:hover {background: #b24c2ccc;}

.thumb-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1em;
	margin-top: 3.5em;
	padding: 0;
}

.thumb-list label {display: grid;}

.thumb-list img, .thumb-list .outer {grid-column: 1; grid-row: 1;}

.thumb-list .outer {
	display: grid;
	place-items: center;
	transition: background 0.25s;
}

.thumb-list .inner {
	font-family: "interpol-sans", "Helvetica", Helvetica, Arial, "sans-serif";
	font-weight: 600;
	font-size: 0.7em;
	color: whitesmoke;
	text-decoration: none;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.25s;
}







/* Klick Event simulieren WEB 3 */

[id="image99"]:checked ~ .container .featured-list li:nth-child(1),
[id="image100"]:checked ~ .container .featured-list li:nth-child(2),
[id="image101"]:checked ~ .container .featured-list li:nth-child(3),
[id="image102"]:checked ~ .container .featured-list li:nth-child(4),
[id="image103"]:checked ~ .container .featured-list li:nth-child(5),
[id^="image_web3"]:checked ~ .container .arrows [for^="image_web3"]:hover::before,
[id^="image_web3"]:checked ~ .container .arrows [for^="image_web3"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image99"]:checked ~ .container .arrows [for="image103"]::before,
[id="image100"]:checked ~ .container .arrows [for="image99"]::before,
[id="image101"]:checked ~ .container .arrows [for="image100"]::before,
[id="image102"]:checked ~ .container .arrows [for="image101"]::before,
[id="image103"]:checked ~ .container .arrows [for="image102"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image99"]:checked ~ .container .arrows [for="image100"]::after,
[id="image100"]:checked ~ .container .arrows [for="image101"]::after,
[id="image101"]:checked ~ .container .arrows [for="image102"]::after,
[id="image102"]:checked ~ .container .arrows [for="image103"]::after,
[id="image103"]:checked ~ .container .arrows [for="image99"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image99"]:checked ~ .container .dots [for="image99"],
[id="image100"]:checked ~ .container .dots [for="image100"],
[id="image101"]:checked ~ .container .dots [for="image101"],
[id="image102"]:checked ~ .container .dots [for="image102"],
[id="image103"]:checked ~ .container .dots [for="image103"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image99"]:checked ~ .container [for="image99"] .outer,
[id="image100"]:checked ~ .container [for="image100"] .outer,
[id="image101"]:checked ~ .container [for="image101"] .outer,
[id="image102"]:checked ~ .container [for="image102"] .outer,
[id="image103"]:checked ~ .container [for="image103"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image99"]:checked ~ .container [for="image99"] .inner,
[id="image100"]:checked ~ .container [for="image100"] .inner,
[id="image101"]:checked ~ .container [for="image101"] .inner,
[id="image102"]:checked ~ .container [for="image102"] .inner,
[id="image103"]:checked ~ .container [for="image103"] .inner {
	opacity: 1;
	transform: none;
}





/* Klick Event simulieren WEB 2 */

[id="image94"]:checked ~ .container .featured-list li:nth-child(1),
[id="image95"]:checked ~ .container .featured-list li:nth-child(2),
[id="image96"]:checked ~ .container .featured-list li:nth-child(3),
[id="image97"]:checked ~ .container .featured-list li:nth-child(4),
[id="image98"]:checked ~ .container .featured-list li:nth-child(5),
[id^="image_web2"]:checked ~ .container .arrows [for^="image_web2"]:hover::before,
[id^="image_web2"]:checked ~ .container .arrows [for^="image_web2"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image94"]:checked ~ .container .arrows [for="image98"]::before,
[id="image95"]:checked ~ .container .arrows [for="image94"]::before,
[id="image96"]:checked ~ .container .arrows [for="image95"]::before,
[id="image97"]:checked ~ .container .arrows [for="image96"]::before,
[id="image98"]:checked ~ .container .arrows [for="image97"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image94"]:checked ~ .container .arrows [for="image95"]::after,
[id="image95"]:checked ~ .container .arrows [for="image96"]::after,
[id="image96"]:checked ~ .container .arrows [for="image97"]::after,
[id="image97"]:checked ~ .container .arrows [for="image98"]::after,
[id="image98"]:checked ~ .container .arrows [for="image94"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image94"]:checked ~ .container .dots [for="image94"],
[id="image95"]:checked ~ .container .dots [for="image95"],
[id="image96"]:checked ~ .container .dots [for="image96"],
[id="image97"]:checked ~ .container .dots [for="image97"],
[id="image98"]:checked ~ .container .dots [for="image99"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image94"]:checked ~ .container [for="image94"] .outer,
[id="image95"]:checked ~ .container [for="image95"] .outer,
[id="image96"]:checked ~ .container [for="image96"] .outer,
[id="image97"]:checked ~ .container [for="image97"] .outer,
[id="image98"]:checked ~ .container [for="image98"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image94"]:checked ~ .container [for="image94"] .inner,
[id="image95"]:checked ~ .container [for="image95"] .inner,
[id="image96"]:checked ~ .container [for="image96"] .inner,
[id="image97"]:checked ~ .container [for="image97"] .inner,
[id="image98"]:checked ~ .container [for="image98"] .inner {
	opacity: 1;
	transform: none;
}






/* Klick Event simulieren WEB 1 */

[id="image89"]:checked ~ .container .featured-list li:nth-child(1),
[id="image90"]:checked ~ .container .featured-list li:nth-child(2),
[id="image91"]:checked ~ .container .featured-list li:nth-child(3),
[id="image92"]:checked ~ .container .featured-list li:nth-child(4),
[id="image93"]:checked ~ .container .featured-list li:nth-child(5),
[id^="image_web"]:checked ~ .container .arrows [for^="image_web"]:hover::before,
[id^="image_web"]:checked ~ .container .arrows [for^="image_web"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image89"]:checked ~ .container .arrows [for="image93"]::before,
[id="image90"]:checked ~ .container .arrows [for="image89"]::before,
[id="image91"]:checked ~ .container .arrows [for="image90"]::before,
[id="image92"]:checked ~ .container .arrows [for="image91"]::before,
[id="image93"]:checked ~ .container .arrows [for="image92"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image89"]:checked ~ .container .arrows [for="image90"]::after,
[id="image90"]:checked ~ .container .arrows [for="image91"]::after,
[id="image91"]:checked ~ .container .arrows [for="image92"]::after,
[id="image92"]:checked ~ .container .arrows [for="image93"]::after,
[id="image93"]:checked ~ .container .arrows [for="image89"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image89"]:checked ~ .container .dots [for="image89"],
[id="image90"]:checked ~ .container .dots [for="image90"],
[id="image91"]:checked ~ .container .dots [for="image91"],
[id="image92"]:checked ~ .container .dots [for="image92"],
[id="image93"]:checked ~ .container .dots [for="image93"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image89"]:checked ~ .container [for="image89"] .outer,
[id="image90"]:checked ~ .container [for="image90"] .outer,
[id="image91"]:checked ~ .container [for="image91"] .outer,
[id="image92"]:checked ~ .container [for="image92"] .outer,
[id="image93"]:checked ~ .container [for="image93"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image89"]:checked ~ .container [for="image89"] .inner,
[id="image90"]:checked ~ .container [for="image90"] .inner,
[id="image91"]:checked ~ .container [for="image91"] .inner,
[id="image92"]:checked ~ .container [for="image92"] .inner,
[id="image93"]:checked ~ .container [for="image93"] .inner {
	opacity: 1;
	transform: none;
}






/* Klick Event simulieren ATMO */

[id="image73"]:checked ~ .container .featured-list li:nth-child(1),
[id="image74"]:checked ~ .container .featured-list li:nth-child(2),
[id="image75"]:checked ~ .container .featured-list li:nth-child(3),
[id="image76"]:checked ~ .container .featured-list li:nth-child(4),
[id="image77"]:checked ~ .container .featured-list li:nth-child(5),
[id="image78"]:checked ~ .container .featured-list li:nth-child(6),
[id="image79"]:checked ~ .container .featured-list li:nth-child(7),
[id="image80"]:checked ~ .container .featured-list li:nth-child(8),
[id="image81"]:checked ~ .container .featured-list li:nth-child(9),
[id="image82"]:checked ~ .container .featured-list li:nth-child(10),
[id="image83"]:checked ~ .container .featured-list li:nth-child(11),
[id="image84"]:checked ~ .container .featured-list li:nth-child(12),
[id="image85"]:checked ~ .container .featured-list li:nth-child(13),
[id="image86"]:checked ~ .container .featured-list li:nth-child(14),
[id="image87"]:checked ~ .container .featured-list li:nth-child(15),
[id="image88"]:checked ~ .container .featured-list li:nth-child(16),
[id^="image_at"]:checked ~ .container .arrows [for^="image_at"]:hover::before,
[id^="image_at"]:checked ~ .container .arrows [for^="image_at"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image73"]:checked ~ .container .arrows [for="image88"]::before,
[id="image74"]:checked ~ .container .arrows [for="image73"]::before,
[id="image75"]:checked ~ .container .arrows [for="image74"]::before,
[id="image76"]:checked ~ .container .arrows [for="image75"]::before,
[id="image77"]:checked ~ .container .arrows [for="image76"]::before,
[id="image78"]:checked ~ .container .arrows [for="image77"]::before,
[id="image79"]:checked ~ .container .arrows [for="image78"]::before,
[id="image80"]:checked ~ .container .arrows [for="image79"]::before,
[id="image81"]:checked ~ .container .arrows [for="image80"]::before, 
[id="image82"]:checked ~ .container .arrows [for="image81"]::before, 
[id="image83"]:checked ~ .container .arrows [for="image82"]::before, 
[id="image84"]:checked ~ .container .arrows [for="image83"]::before, 
[id="image85"]:checked ~ .container .arrows [for="image84"]::before, 
[id="image86"]:checked ~ .container .arrows [for="image85"]::before, 
[id="image87"]:checked ~ .container .arrows [for="image86"]::before, 
[id="image88"]:checked ~ .container .arrows [for="image87"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image73"]:checked ~ .container .arrows [for="image74"]::after,
[id="image74"]:checked ~ .container .arrows [for="image75"]::after,
[id="image75"]:checked ~ .container .arrows [for="image76"]::after,
[id="image76"]:checked ~ .container .arrows [for="image77"]::after,
[id="image77"]:checked ~ .container .arrows [for="image78"]::after,
[id="image78"]:checked ~ .container .arrows [for="image79"]::after,
[id="image79"]:checked ~ .container .arrows [for="image80"]::after,
[id="image80"]:checked ~ .container .arrows [for="image81"]::after,
[id="image81"]:checked ~ .container .arrows [for="image82"]::after,
[id="image82"]:checked ~ .container .arrows [for="image83"]::after,
[id="image83"]:checked ~ .container .arrows [for="image84"]::after,
[id="image84"]:checked ~ .container .arrows [for="image85"]::after,
[id="image85"]:checked ~ .container .arrows [for="image86"]::after,
[id="image86"]:checked ~ .container .arrows [for="image87"]::after,
[id="image87"]:checked ~ .container .arrows [for="image88"]::after,
[id="image88"]:checked ~ .container .arrows [for="image73"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image73"]:checked ~ .container .dots [for="image73"],
[id="image74"]:checked ~ .container .dots [for="image74"],
[id="image75"]:checked ~ .container .dots [for="image75"],
[id="image76"]:checked ~ .container .dots [for="image76"],
[id="image77"]:checked ~ .container .dots [for="image77"],
[id="image78"]:checked ~ .container .dots [for="image78"],
[id="image79"]:checked ~ .container .dots [for="image79"],
[id="image80"]:checked ~ .container .dots [for="image80"],
[id="image81"]:checked ~ .container .dots [for="image81"],
[id="image82"]:checked ~ .container .dots [for="image82"],
[id="image83"]:checked ~ .container .dots [for="image83"],
[id="image84"]:checked ~ .container .dots [for="image84"],
[id="image85"]:checked ~ .container .dots [for="image85"],
[id="image86"]:checked ~ .container .dots [for="image86"],
[id="image87"]:checked ~ .container .dots [for="image87"],
[id="image88"]:checked ~ .container .dots [for="image88"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image73"]:checked ~ .container [for="image73"] .outer,
[id="image74"]:checked ~ .container [for="image74"] .outer,
[id="image75"]:checked ~ .container [for="image75"] .outer,
[id="image76"]:checked ~ .container [for="image76"] .outer,
[id="image77"]:checked ~ .container [for="image77"] .outer,
[id="image78"]:checked ~ .container [for="image78"] .outer,
[id="image79"]:checked ~ .container [for="image79"] .outer,
[id="image80"]:checked ~ .container [for="image80"] .outer,
[id="image81"]:checked ~ .container [for="image81"] .outer,
[id="image82"]:checked ~ .container [for="image82"] .outer,
[id="image83"]:checked ~ .container [for="image83"] .outer,
[id="image84"]:checked ~ .container [for="image84"] .outer,
[id="image85"]:checked ~ .container [for="image85"] .outer,
[id="image86"]:checked ~ .container [for="image86"] .outer,
[id="image87"]:checked ~ .container [for="image87"] .outer,
[id="image88"]:checked ~ .container [for="image88"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image73"]:checked ~ .container [for="image73"] .inner,
[id="image74"]:checked ~ .container [for="image74"] .inner,
[id="image75"]:checked ~ .container [for="image75"] .inner,
[id="image76"]:checked ~ .container [for="image76"] .inner,
[id="image77"]:checked ~ .container [for="image77"] .inner,
[id="image78"]:checked ~ .container [for="image78"] .inner,
[id="image79"]:checked ~ .container [for="image79"] .inner,
[id="image80"]:checked ~ .container [for="image80"] .inner,
[id="image81"]:checked ~ .container [for="image81"] .inner,
[id="image82"]:checked ~ .container [for="image82"] .inner,
[id="image83"]:checked ~ .container [for="image83"] .inner,
[id="image84"]:checked ~ .container [for="image84"] .inner,
[id="image85"]:checked ~ .container [for="image85"] .inner,
[id="image86"]:checked ~ .container [for="image86"] .inner,
[id="image87"]:checked ~ .container [for="image87"] .inner,
[id="image88"]:checked ~ .container [for="image88"] .inner {
	opacity: 1;
	transform: none;
}






/* Klick Event simulieren GARNELE */

[id="image61"]:checked ~ .container .featured-list li:nth-child(1),
[id="image62"]:checked ~ .container .featured-list li:nth-child(2),
[id="image63"]:checked ~ .container .featured-list li:nth-child(3),
[id="image64"]:checked ~ .container .featured-list li:nth-child(4),
[id="image65"]:checked ~ .container .featured-list li:nth-child(5),
[id="image66"]:checked ~ .container .featured-list li:nth-child(6),
[id="image67"]:checked ~ .container .featured-list li:nth-child(7),
[id="image68"]:checked ~ .container .featured-list li:nth-child(8),
[id="image69"]:checked ~ .container .featured-list li:nth-child(9),
[id="image70"]:checked ~ .container .featured-list li:nth-child(10),
[id="image71"]:checked ~ .container .featured-list li:nth-child(11),
[id="image72"]:checked ~ .container .featured-list li:nth-child(12),
[id^="image_ga"]:checked ~ .container .arrows [for^="image_ga"]:hover::before,
[id^="image_ga"]:checked ~ .container .arrows [for^="image_ga"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image61"]:checked ~ .container .arrows [for="image70"]::before,
[id="image62"]:checked ~ .container .arrows [for="image61"]::before,
[id="image63"]:checked ~ .container .arrows [for="image62"]::before,
[id="image64"]:checked ~ .container .arrows [for="image63"]::before,
[id="image65"]:checked ~ .container .arrows [for="image64"]::before,
[id="image66"]:checked ~ .container .arrows [for="image65"]::before,
[id="image67"]:checked ~ .container .arrows [for="image66"]::before,
[id="image68"]:checked ~ .container .arrows [for="image67"]::before,
[id="image69"]:checked ~ .container .arrows [for="image68"]::before, 
[id="image70"]:checked ~ .container .arrows [for="image69"]::before, 
[id="image71"]:checked ~ .container .arrows [for="image70"]::before, 
[id="image72"]:checked ~ .container .arrows [for="image71"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image61"]:checked ~ .container .arrows [for="image62"]::after,
[id="image62"]:checked ~ .container .arrows [for="image63"]::after,
[id="image63"]:checked ~ .container .arrows [for="image64"]::after,
[id="image64"]:checked ~ .container .arrows [for="image65"]::after,
[id="image65"]:checked ~ .container .arrows [for="image66"]::after,
[id="image66"]:checked ~ .container .arrows [for="image67"]::after,
[id="image67"]:checked ~ .container .arrows [for="image68"]::after,
[id="image68"]:checked ~ .container .arrows [for="image69"]::after,
[id="image69"]:checked ~ .container .arrows [for="image70"]::after,
[id="image70"]:checked ~ .container .arrows [for="image71"]::after,
[id="image71"]:checked ~ .container .arrows [for="image72"]::after,
[id="image72"]:checked ~ .container .arrows [for="image61"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image61"]:checked ~ .container .dots [for="image61"],
[id="image62"]:checked ~ .container .dots [for="image62"],
[id="image63"]:checked ~ .container .dots [for="image63"],
[id="image64"]:checked ~ .container .dots [for="image64"],
[id="image65"]:checked ~ .container .dots [for="image65"],
[id="image66"]:checked ~ .container .dots [for="image66"],
[id="image67"]:checked ~ .container .dots [for="image67"],
[id="image68"]:checked ~ .container .dots [for="image68"],
[id="image69"]:checked ~ .container .dots [for="image69"],
[id="image70"]:checked ~ .container .dots [for="image70"],
[id="image71"]:checked ~ .container .dots [for="image71"],
[id="image72"]:checked ~ .container .dots [for="image72"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image61"]:checked ~ .container [for="image61"] .outer,
[id="image62"]:checked ~ .container [for="image62"] .outer,
[id="image63"]:checked ~ .container [for="image63"] .outer,
[id="image64"]:checked ~ .container [for="image64"] .outer,
[id="image65"]:checked ~ .container [for="image65"] .outer,
[id="image66"]:checked ~ .container [for="image66"] .outer,
[id="image67"]:checked ~ .container [for="image67"] .outer,
[id="image68"]:checked ~ .container [for="image68"] .outer,
[id="image69"]:checked ~ .container [for="image69"] .outer,
[id="image70"]:checked ~ .container [for="image70"] .outer,
[id="image71"]:checked ~ .container [for="image71"] .outer,
[id="image72"]:checked ~ .container [for="image72"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image61"]:checked ~ .container [for="image61"] .inner,
[id="image62"]:checked ~ .container [for="image62"] .inner,
[id="image63"]:checked ~ .container [for="image63"] .inner,
[id="image64"]:checked ~ .container [for="image64"] .inner,
[id="image65"]:checked ~ .container [for="image65"] .inner,
[id="image66"]:checked ~ .container [for="image66"] .inner,
[id="image67"]:checked ~ .container [for="image67"] .inner,
[id="image68"]:checked ~ .container [for="image68"] .inner,
[id="image69"]:checked ~ .container [for="image69"] .inner,
[id="image70"]:checked ~ .container [for="image70"] .inner,
[id="image71"]:checked ~ .container [for="image71"] .inner,
[id="image72"]:checked ~ .container [for="image72"] .inner {
	opacity: 1;
	transform: none;
}






/* Klick Event simulieren FOOD */

[id="image51"]:checked ~ .container .featured-list li:nth-child(1),
[id="image52"]:checked ~ .container .featured-list li:nth-child(2),
[id="image53"]:checked ~ .container .featured-list li:nth-child(3),
[id="image54"]:checked ~ .container .featured-list li:nth-child(4),
[id="image55"]:checked ~ .container .featured-list li:nth-child(5),
[id="image56"]:checked ~ .container .featured-list li:nth-child(6),
[id="image57"]:checked ~ .container .featured-list li:nth-child(7),
[id="image58"]:checked ~ .container .featured-list li:nth-child(8),
[id="image59"]:checked ~ .container .featured-list li:nth-child(9),
[id="image60"]:checked ~ .container .featured-list li:nth-child(10),
[id^="image_fd"]:checked ~ .container .arrows [for^="image_fd"]:hover::before,
[id^="image_fd"]:checked ~ .container .arrows [for^="image_fd"]:hover::after {opacity: 1;}


/* Pfeile nach links */

[id="image51"]:checked ~ .container .arrows [for="image60"]::before,
[id="image52"]:checked ~ .container .arrows [for="image51"]::before,
[id="image53"]:checked ~ .container .arrows [for="image52"]::before,
[id="image54"]:checked ~ .container .arrows [for="image53"]::before,
[id="image55"]:checked ~ .container .arrows [for="image54"]::before,
[id="image56"]:checked ~ .container .arrows [for="image55"]::before,
[id="image57"]:checked ~ .container .arrows [for="image56"]::before,
[id="image58"]:checked ~ .container .arrows [for="image57"]::before,
[id="image59"]:checked ~ .container .arrows [for="image58"]::before, 
[id="image60"]:checked ~ .container .arrows [for="image59"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}


/* Pfeile nach rechts */

[id="image51"]:checked ~ .container .arrows [for="image52"]::after,
[id="image52"]:checked ~ .container .arrows [for="image53"]::after,
[id="image53"]:checked ~ .container .arrows [for="image54"]::after,
[id="image54"]:checked ~ .container .arrows [for="image55"]::after,
[id="image55"]:checked ~ .container .arrows [for="image56"]::after,
[id="image56"]:checked ~ .container .arrows [for="image57"]::after,
[id="image57"]:checked ~ .container .arrows [for="image58"]::after,
[id="image58"]:checked ~ .container .arrows [for="image59"]::after,
[id="image59"]:checked ~ .container .arrows [for="image60"]::after,
[id="image60"]:checked ~ .container .arrows [for="image51"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}


/* DOTS Location */

[id="image51"]:checked ~ .container .dots [for="image51"],
[id="image52"]:checked ~ .container .dots [for="image52"],
[id="image53"]:checked ~ .container .dots [for="image53"],
[id="image54"]:checked ~ .container .dots [for="image54"],
[id="image55"]:checked ~ .container .dots [for="image55"],
[id="image56"]:checked ~ .container .dots [for="image56"],
[id="image57"]:checked ~ .container .dots [for="image57"],
[id="image58"]:checked ~ .container .dots [for="image58"],
[id="image59"]:checked ~ .container .dots [for="image59"],
[id="image60"]:checked ~ .container .dots [for="image60"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}


/* Thumbs - Beschriftung; BG und BU */

[id="image51"]:checked ~ .container [for="image51"] .outer,
[id="image52"]:checked ~ .container [for="image52"] .outer,
[id="image53"]:checked ~ .container [for="image53"] .outer,
[id="image54"]:checked ~ .container [for="image54"] .outer,
[id="image55"]:checked ~ .container [for="image55"] .outer,
[id="image56"]:checked ~ .container [for="image56"] .outer,
[id="image57"]:checked ~ .container [for="image57"] .outer,
[id="image58"]:checked ~ .container [for="image58"] .outer,
[id="image59"]:checked ~ .container [for="image59"] .outer,
[id="image60"]:checked ~ .container [for="image60"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image51"]:checked ~ .container [for="image51"] .inner,
[id="image52"]:checked ~ .container [for="image52"] .inner,
[id="image53"]:checked ~ .container [for="image53"] .inner,
[id="image54"]:checked ~ .container [for="image54"] .inner,
[id="image55"]:checked ~ .container [for="image55"] .inner,
[id="image56"]:checked ~ .container [for="image56"] .inner,
[id="image57"]:checked ~ .container [for="image57"] .inner,
[id="image58"]:checked ~ .container [for="image58"] .inner,
[id="image59"]:checked ~ .container [for="image59"] .inner,
[id="image60"]:checked ~ .container [for="image60"] .inner {
	opacity: 1;
	transform: none;
}





/*Klick Event simulieren FOTO*/

[id="image31"]:checked ~ .container .featured-list li:nth-child(1),
[id="image32"]:checked ~ .container .featured-list li:nth-child(2),
[id="image33"]:checked ~ .container .featured-list li:nth-child(3),
[id="image34"]:checked ~ .container .featured-list li:nth-child(4),
[id="image35"]:checked ~ .container .featured-list li:nth-child(5),
[id="image36"]:checked ~ .container .featured-list li:nth-child(6),
[id="image37"]:checked ~ .container .featured-list li:nth-child(7),
[id="image38"]:checked ~ .container .featured-list li:nth-child(8),
[id="image39"]:checked ~ .container .featured-list li:nth-child(9),
[id="image40"]:checked ~ .container .featured-list li:nth-child(10),
[id="image41"]:checked ~ .container .featured-list li:nth-child(11),
[id="image42"]:checked ~ .container .featured-list li:nth-child(12),
[id="image43"]:checked ~ .container .featured-list li:nth-child(13),
[id="image44"]:checked ~ .container .featured-list li:nth-child(14),
[id^="image_fot"]:checked ~ .container .arrows [for^="image_fot"]:hover::before,
[id^="image_fot"]:checked ~ .container .arrows [for^="image_fot"]:hover::after {
	opacity: 1;
}

[id="image31"]:checked ~ .container .arrows [for="image44"]::before,
[id="image32"]:checked ~ .container .arrows [for="image31"]::before,
[id="image33"]:checked ~ .container .arrows [for="image32"]::before,
[id="image34"]:checked ~ .container .arrows [for="image33"]::before,
[id="image35"]:checked ~ .container .arrows [for="image34"]::before,
[id="image36"]:checked ~ .container .arrows [for="image35"]::before,
[id="image37"]:checked ~ .container .arrows [for="image36"]::before,
[id="image38"]:checked ~ .container .arrows [for="image37"]::before,
[id="image39"]:checked ~ .container .arrows [for="image38"]::before,
[id="image40"]:checked ~ .container .arrows [for="image39"]::before,
[id="image41"]:checked ~ .container .arrows [for="image40"]::before,
[id="image42"]:checked ~ .container .arrows [for="image41"]::before,
[id="image43"]:checked ~ .container .arrows [for="image42"]::before,
[id="image44"]:checked ~ .container .arrows [for="image43"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}

[id="image31"]:checked ~ .container .arrows [for="image32"]::after,
[id="image32"]:checked ~ .container .arrows [for="image33"]::after,
[id="image33"]:checked ~ .container .arrows [for="image34"]::after,
[id="image34"]:checked ~ .container .arrows [for="image35"]::after,
[id="image35"]:checked ~ .container .arrows [for="image36"]::after,
[id="image36"]:checked ~ .container .arrows [for="image37"]::after,
[id="image37"]:checked ~ .container .arrows [for="image38"]::after,
[id="image38"]:checked ~ .container .arrows [for="image39"]::after,
[id="image39"]:checked ~ .container .arrows [for="image40"]::after,
[id="image40"]:checked ~ .container .arrows [for="image41"]::after,
[id="image41"]:checked ~ .container .arrows [for="image42"]::after,
[id="image42"]:checked ~ .container .arrows [for="image43"]::after,
[id="image43"]:checked ~ .container .arrows [for="image44"]::after,
[id="image44"]:checked ~ .container .arrows [for="image31"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}

[id="image31"]:checked ~ .container .dots [for="image31"],
[id="image32"]:checked ~ .container .dots [for="image32"],
[id="image33"]:checked ~ .container .dots [for="image33"],
[id="image34"]:checked ~ .container .dots [for="image34"],
[id="image35"]:checked ~ .container .dots [for="image35"],
[id="image36"]:checked ~ .container .dots [for="image36"],
[id="image37"]:checked ~ .container .dots [for="image37"],
[id="image38"]:checked ~ .container .dots [for="image38"],
[id="image39"]:checked ~ .container .dots [for="image39"],
[id="image40"]:checked ~ .container .dots [for="image40"],
[id="image41"]:checked ~ .container .dots [for="image41"],
[id="image42"]:checked ~ .container .dots [for="image42"],
[id="image43"]:checked ~ .container .dots [for="image43"],
[id="image44"]:checked ~ .container .dots [for="image44"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image31"]:checked ~ .container [for="image31"] .outer,
[id="image32"]:checked ~ .container [for="image32"] .outer,
[id="image33"]:checked ~ .container [for="image33"] .outer,
[id="image34"]:checked ~ .container [for="image34"] .outer,
[id="image35"]:checked ~ .container [for="image35"] .outer,
[id="image36"]:checked ~ .container [for="image36"] .outer,
[id="image37"]:checked ~ .container [for="image37"] .outer,
[id="image38"]:checked ~ .container [for="image38"] .outer,
[id="image39"]:checked ~ .container [for="image39"] .outer,
[id="image40"]:checked ~ .container [for="image40"] .outer,
[id="image41"]:checked ~ .container [for="image41"] .outer,
[id="image42"]:checked ~ .container [for="image42"] .outer,
[id="image43"]:checked ~ .container [for="image43"] .outer,
[id="image44"]:checked ~ .container [for="image44"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image31"]:checked ~ .container [for="image31"] .inner,
[id="image32"]:checked ~ .container [for="image32"] .inner,
[id="image33"]:checked ~ .container [for="image33"] .inner,
[id="image34"]:checked ~ .container [for="image34"] .inner,
[id="image35"]:checked ~ .container [for="image35"] .inner,
[id="image36"]:checked ~ .container [for="image36"] .inner,
[id="image37"]:checked ~ .container [for="image37"] .inner,
[id="image38"]:checked ~ .container [for="image38"] .inner,
[id="image39"]:checked ~ .container [for="image39"] .inner,
[id="image40"]:checked ~ .container [for="image40"] .inner,
[id="image41"]:checked ~ .container [for="image41"] .inner,
[id="image42"]:checked ~ .container [for="image42"] .inner,
[id="image43"]:checked ~ .container [for="image43"] .inner,
[id="image44"]:checked ~ .container [for="image44"] .inner {
	opacity: 1;
	transform: none;
}





/*Klick Event simulieren FISCH*/

[id="image21"]:checked ~ .container .featured-list li:nth-child(1),
[id="image22"]:checked ~ .container .featured-list li:nth-child(2),
[id="image23"]:checked ~ .container .featured-list li:nth-child(3),
[id="image24"]:checked ~ .container .featured-list li:nth-child(4),
[id="image25"]:checked ~ .container .featured-list li:nth-child(5),
[id^="image_fee"]:checked ~ .container .arrows [for^="image_fee"]:hover::before,
[id^="image_fee"]:checked ~ .container .arrows [for^="image_fee"]:hover::after {
	opacity: 1;
}

[id="image21"]:checked ~ .container .arrows [for="image25"]::before,
[id="image22"]:checked ~ .container .arrows [for="image21"]::before,
[id="image23"]:checked ~ .container .arrows [for="image22"]::before,
[id="image24"]:checked ~ .container .arrows [for="image23"]::before,
[id="image25"]:checked ~ .container .arrows [for="image24"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}

[id="image21"]:checked ~ .container .arrows [for="image22"]::after,
[id="image22"]:checked ~ .container .arrows [for="image23"]::after,
[id="image23"]:checked ~ .container .arrows [for="image24"]::after,
[id="image24"]:checked ~ .container .arrows [for="image25"]::after,
[id="image25"]:checked ~ .container .arrows [for="image21"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}

[id="image21"]:checked ~ .container .dots [for="image21"],
[id="image22"]:checked ~ .container .dots [for="image22"],
[id="image23"]:checked ~ .container .dots [for="image23"],
[id="image24"]:checked ~ .container .dots [for="image24"],
[id="image25"]:checked ~ .container .dots [for="image25"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image21"]:checked ~ .container [for="image21"] .outer,
[id="image22"]:checked ~ .container [for="image22"] .outer,
[id="image23"]:checked ~ .container [for="image23"] .outer,
[id="image24"]:checked ~ .container [for="image24"] .outer,
[id="image25"]:checked ~ .container [for="image25"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image21"]:checked ~ .container [for="image21"] .inner,
[id="image22"]:checked ~ .container [for="image22"] .inner,
[id="image23"]:checked ~ .container [for="image23"] .inner,
[id="image24"]:checked ~ .container [for="image24"] .inner,
[id="image25"]:checked ~ .container [for="image25"] .inner {
	opacity: 1;
	transform: none;
}





/*Klick Event simulieren ROLLINGPIN*/

[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id="image4"]:checked ~ .container .featured-list li:nth-child(4),
[id="image5"]:checked ~ .container .featured-list li:nth-child(5),
[id="image6"]:checked ~ .container .featured-list li:nth-child(6),
[id="image7"]:checked ~ .container .featured-list li:nth-child(7),
[id="image8"]:checked ~ .container .featured-list li:nth-child(8),
[id="image9"]:checked ~ .container .featured-list li:nth-child(9),
[id="image10"]:checked ~ .container .featured-list li:nth-child(10),
[id^="image_RP"]:checked ~ .container .arrows [for^="image_RP"]:hover::before,
[id^="image_RP"]:checked ~ .container .arrows [for^="image_RP"]:hover::after {
	opacity: 1;
}

[id="image1"]:checked ~ .container .arrows [for="image10"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before,
[id="image4"]:checked ~ .container .arrows [for="image3"]::before,
[id="image5"]:checked ~ .container .arrows [for="image4"]::before,
[id="image6"]:checked ~ .container .arrows [for="image5"]::before,
[id="image7"]:checked ~ .container .arrows [for="image6"]::before,
[id="image8"]:checked ~ .container .arrows [for="image7"]::before,
[id="image9"]:checked ~ .container .arrows [for="image8"]::before,
[id="image10"]:checked ~ .container .arrows [for="image9"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}

[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image4"]::after,
[id="image4"]:checked ~ .container .arrows [for="image5"]::after,
[id="image5"]:checked ~ .container .arrows [for="image6"]::after,
[id="image6"]:checked ~ .container .arrows [for="image7"]::after,
[id="image7"]:checked ~ .container .arrows [for="image8"]::after,
[id="image8"]:checked ~ .container .arrows [for="image9"]::after,
[id="image9"]:checked ~ .container .arrows [for="image10"]::after,
[id="image10"]:checked ~ .container .arrows [for="image1"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}

[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"],
[id="image4"]:checked ~ .container .dots [for="image4"],
[id="image5"]:checked ~ .container .dots [for="image5"],
[id="image6"]:checked ~ .container .dots [for="image6"],
[id="image7"]:checked ~ .container .dots [for="image7"],
[id="image8"]:checked ~ .container .dots [for="image8"],
[id="image9"]:checked ~ .container .dots [for="image9"],
[id="image10"]:checked ~ .container .dots [for="image10"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer,
[id="image4"]:checked ~ .container [for="image4"] .outer,
[id="image5"]:checked ~ .container [for="image5"] .outer,
[id="image6"]:checked ~ .container [for="image6"] .outer,
[id="image7"]:checked ~ .container [for="image7"] .outer,
[id="image8"]:checked ~ .container [for="image8"] .outer,
[id="image9"]:checked ~ .container [for="image9"] .outer,
[id="image10"]:checked ~ .container [for="image10"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner,
[id="image4"]:checked ~ .container [for="image4"] .inner,
[id="image5"]:checked ~ .container [for="image5"] .inner,
[id="image6"]:checked ~ .container [for="image6"] .inner,
[id="image7"]:checked ~ .container [for="image7"] .inner,
[id="image8"]:checked ~ .container [for="image8"] .inner,
[id="image9"]:checked ~ .container [for="image9"] .inner,
[id="image10"]:checked ~ .container [for="image10"] .inner {
	opacity: 1;
	transform: none;
}




/*Klick Event simulieren CONEMILL*/

[id="image11"]:checked ~ .container .featured-list li:nth-child(1),
[id="image12"]:checked ~ .container .featured-list li:nth-child(2),
[id="image13"]:checked ~ .container .featured-list li:nth-child(3),
[id="image14"]:checked ~ .container .featured-list li:nth-child(4),
[id="image15"]:checked ~ .container .featured-list li:nth-child(5),
[id="image16"]:checked ~ .container .featured-list li:nth-child(6),
[id="image17"]:checked ~ .container .featured-list li:nth-child(7),
[id="image18"]:checked ~ .container .featured-list li:nth-child(8),
[id="image19"]:checked ~ .container .featured-list li:nth-child(9),
[id="image20"]:checked ~ .container .featured-list li:nth-child(10),
[id^="image_cm"]:checked ~ .container .arrows [for^="image_cm"]:hover::before,
[id^="image_cm"]:checked ~ .container .arrows [for^="image_cm"]:hover::after {
	opacity: 1;
}

[id="image11"]:checked ~ .container .arrows [for="image20"]::before,
[id="image12"]:checked ~ .container .arrows [for="image11"]::before,
[id="image13"]:checked ~ .container .arrows [for="image12"]::before,
[id="image14"]:checked ~ .container .arrows [for="image13"]::before,
[id="image15"]:checked ~ .container .arrows [for="image14"]::before,
[id="image16"]:checked ~ .container .arrows [for="image15"]::before,
[id="image17"]:checked ~ .container .arrows [for="image16"]::before,
[id="image18"]:checked ~ .container .arrows [for="image17"]::before,
[id="image19"]:checked ~ .container .arrows [for="image18"]::before,
[id="image20"]:checked ~ .container .arrows [for="image19"]::before {
	content: '';
	background-image: url(../Bilder/UI/prev_green.png);
}

[id="image11"]:checked ~ .container .arrows [for="image12"]::after,
[id="image12"]:checked ~ .container .arrows [for="image13"]::after,
[id="image13"]:checked ~ .container .arrows [for="image14"]::after,
[id="image14"]:checked ~ .container .arrows [for="image15"]::after,
[id="image15"]:checked ~ .container .arrows [for="image16"]::after,
[id="image16"]:checked ~ .container .arrows [for="image17"]::after,
[id="image17"]:checked ~ .container .arrows [for="image18"]::after,
[id="image18"]:checked ~ .container .arrows [for="image19"]::after,
[id="image19"]:checked ~ .container .arrows [for="image20"]::after,
[id="image20"]:checked ~ .container .arrows [for="image11"]::after {
	content: '';
	background-image: url(../Bilder/UI/next_green.png)
}

[id="image11"]:checked ~ .container .dots [for="image11"],
[id="image12"]:checked ~ .container .dots [for="image12"],
[id="image13"]:checked ~ .container .dots [for="image13"],
[id="image14"]:checked ~ .container .dots [for="image14"],
[id="image15"]:checked ~ .container .dots [for="image15"],
[id="image16"]:checked ~ .container .dots [for="image16"],
[id="image17"]:checked ~ .container .dots [for="image17"],
[id="image18"]:checked ~ .container .dots [for="image18"],
[id="image19"]:checked ~ .container .dots [for="image19"],
[id="image20"]:checked ~ .container .dots [for="image20"] {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image11"]:checked ~ .container [for="image11"] .outer,
[id="image12"]:checked ~ .container [for="image12"] .outer,
[id="image13"]:checked ~ .container [for="image13"] .outer,
[id="image14"]:checked ~ .container [for="image14"] .outer,
[id="image15"]:checked ~ .container [for="image15"] .outer,
[id="image16"]:checked ~ .container [for="image16"] .outer,
[id="image17"]:checked ~ .container [for="image17"] .outer,
[id="image18"]:checked ~ .container [for="image18"] .outer,
[id="image19"]:checked ~ .container [for="image19"] .outer,
[id="image20"]:checked ~ .container [for="image20"] .outer {
	background: rgba(178,76,44,1.00);
	opacity: 0.7;
}

[id="image11"]:checked ~ .container [for="image11"] .inner,
[id="image12"]:checked ~ .container [for="image12"] .inner,
[id="image13"]:checked ~ .container [for="image13"] .inner,
[id="image14"]:checked ~ .container [for="image14"] .inner,
[id="image15"]:checked ~ .container [for="image15"] .inner,
[id="image16"]:checked ~ .container [for="image16"] .inner,
[id="image17"]:checked ~ .container [for="image17"] .inner,
[id="image18"]:checked ~ .container [for="image18"] .inner,
[id="image19"]:checked ~ .container [for="image19"] .inner,
[id="image20"]:checked ~ .container [for="image20"] .inner {
	opacity: 1;
	transform: none;
}