/*	Get Joy Layout responsiv, Version 2026
	Umsetzung: (c) becker consulting (www.bc-home.de)
	Alle Rechte vorbehalten.					*/



@charset "ISO-8859-1";


@font-face {
	font-family: 'Open Sans';
	src: url('./OpenSans-Regular.ttf') format('truetype');
	src: url('./OpenSans-Regular.ttf') format('truetype'),
	     url('./OpenSans-Regular.eot') format('eot'),
	     url('./OpenSans-Regular.svg') format('svg');
	}



/*	----------- Grund-Definitionen (alle media-screens) ---------------- */


html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	padding: 0;
	margin: 0;
	}

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

body { 
	font-family: 'Open Sans', Arial, Helvetica, Geneva, Sans-serif, sans-serif; 
	font-size: 0.815rem;	/*13px*/
	color: black;
	font-weight: normal;
	font-style: normal;
	padding: 0;
	margin: 0;
	}

p, pre, blockquote, address, h1, h2, h3, h4, h5, h6, div {
	word-wrap: break-word;
	line-height: 1.35;
	margin: 0;	
	}

p { 
	font-size: inherit;
	font-style: normal;
	text-decoration: none;
	}

b, em {
	font-weight: bold;
	}

address {
	font-style: normal;
	margin: 0;
	}

li { 
	font-size: inherit;
	font-style: normal;
	list-style: none;
	margin: 0;
	padding: 0;
	}

ul { 
	font-size: inherit; 
	font-style: normal;
	list-style: none;
	margin: 0;
	padding: 0;
	}

ol {
	font-size: inherit;
	}

a:link, a:visited, a:hover, a:focus, a:active {
	font-size: inherit;
	color: black;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
	}

a:link { 
	color: black;
	}

a:hover { 
	color: rgb(196,0,0);
	}

a:active { 
	color: black;
	background-color: rgb(242,185,13);
	}

a img {
	border: 0;
	}

h1, h2, h3, h4, h5, h6 {
	font-size: 1rem;		/*16px*/
	color: black;
	font-weight: normal;
	text-decoration: none;
	font-style: normal;
	margin: 0;
	padding: 0;
	}

h1 { 
	font-size: 1.25rem;	/*20px*/
	padding-bottom: 1.13em;
	}

h2 { 
	font-size: 1.25rem;	/*20px*/
	padding-top: 1.13em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid rgb(192,192,192);
	margin-bottom: 1.1em;
	}

h3 { 
	padding-bottom: 0.4em;
	border-bottom: 1px solid rgb(192,192,192);
	}

h5 { 
	font-size: 0.95rem;	/*15px*/
	}


/*	-------------- Haupt-Navigation -----------------*/


li a {
	display: block;
	color: black;
	max-width: 200px;
	padding-left: 1.875rem;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	margin: 0 0 0.25em 0.5rem;
	border-radius: 1em;
	transition: background-color 0.6s ease-in-out;
	}

.leftNavigation li a:visited {
	display: none;
	}

.leftNavigation li a:hover, .leftNavigation li a.selected {
	background-color: rgb(242,185,13);
	color: black;
	border-radius: 1em;
	transition: background-color 0.01s;
	}

.leftNavigation li a:active {
	background-color: rgb(242,185,13) !important;
	border-radius: 1em !important;
	}

.leftNavigationBackgroundActive  {
	display: block;
	max-width: 160px;
	font-size: 0.95rem;	/*15px*/
	font-weight: bold;
	color: #C40000;
	padding-left: 0.75rem;
	margin-left: -1.5rem;
	border-left: 0.75rem solid rgb(242,185,13);
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	}

.leftNavigationBackground {
	font-size: 0.95rem;	/*15px*/
	color: black;
	}

.nGetJoyNaviBack {
	font-size: inherit;
 	color: black;
 	font-weight: normal;
 	font-style: normal;
	text-align: left;
 	background-color: rgb(230,230,230);
 	padding: 2rem 1rem;
	}


/*	-------------- Buttons -----------------*/


button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
	}

button[disabled],
html input[disabled] {
	cursor: default;
	}

.bc_button, .bc-button {
	font-family: 'Open Sans';
	font-size: inherit;
	font-style: normal;
	font-weight: normal;
	color: black !important;	
	text-align: center;
	text-decoration: none;
	background-color: transparent;
	padding: 0.4rem 1.25rem;
	margin-right: 0.4rem;
	border: 1px solid rgb(128,128,128);
	border-radius: 1em;
	float: left;
	}

.bc_button_aktiv {
	font-family: 'Open Sans';
	font-size: 0.815rem !important;	/*13px*/
	font-style: normal;
	font-weight: normal;
	color: rgb(196,0,0);	
	text-align: center;
	text-decoration: none;
	background-color: white;
	padding: 0.4rem 1.25rem;
	margin-right: 0.4rem;
	border: 1px solid rgb(196,0,0);
	border-radius: 1em;
	float: left;
	}

.bc_ahover a:hover, .bc-ahover a:hover {
	border: 1px solid rgba(242,185,13,0.8);
	color: black !important;
	background-color: rgba(242,185,13,0.8);
	box-shadow: 0.4em 0.4em 0.5em -0.1em rgba(230,230,230,0.5);
	transition: background-color 0.6s ease-in-out;
	}



/*	-------Mobile Menü  / "Hamburger" etc.---*/


.bc-ico-hamburger::before {
	content: "\2630";			/* für Hamburger-Menü */
	font-weight: bold;
	font-style: normal;
	}

.bc-ico-schliessen::before {
	content: "X";				/* für Schließen-Menü */
	color: rgb(196,0,0);
	font-weight: bold;
	font-style: normal;
	}

.bc-ico-infos-und-termine::before {
	background-color: rgb(255,204,0);
	color: black;
	font-weight: bold;
	font-style: normal;
	padding: 0em 0.6em;
	border-radius: 50%;
	content: "i";
	}

.bc-mobile-menu-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	max-width: 71.25rem;	/* 1140px */
	font-size: 0.7rem;
	color: black;
	background-color: rgb(230,230,230);
	padding: 0.5em 0rem 0.5em 0rem;
	margin: 0 auto;
	border-bottom: 1px solid white;
	}

.bc-mobile-menu-button .menu-active {
	padding: 0.3rem 0.8rem 0.3rem 0;
	display: none;
	}

.bc-mobile-infos-und-termine-button .sidebar-active {
	padding: 0.3rem 0;
	margin-left: 1rem;
	display: none;
	}

.bc-mobile-menu-button .menu-inactive {
	padding: 0.3rem 0.8rem 0.3rem 0;
	display: block;
	}

.bc-mobile-infos-und-termine-button .sidebar-inactive {
	padding: 0.3rem 0;
	margin-left: 1rem;
	display: block;
	}

#menu:target .menu-active {
	display: block;
	}

#sidebar:target .sidebar-active {
	display: block;
	}

#menu:target .menu-inactive {
	display: none;
	}

#sidebar:target .sidebar-inactive {
	display: none;
	}


/*	-------- Webseiten-Kopf / Head -----------*/


.getjoy-logo-back {
	max-width: 71.25rem;	/* 1140px */
	margin: 0 auto;
	line-height: 0;
	}

.getjoy-img-logo {
	display: block;
	max-width: 90%;
	height: auto;
	border: 0;
	padding: 0;
	margin: 0 auto;
	}

.getjoy-img-logo-mobile {
	display: none;
	max-width: 100%;
	height: auto;
	border: 0;
	padding: 0;
	margin: 0;
	}

.getjoy-img-banner-head {
	display: block;
	max-width: 85%;
	height: auto;
	border: 0;
	padding: 0;
	margin: 0 auto;
	animation: bc-zoom-ani 0.3s ease-in;
	}

.nGetJoyHeadlineBack {
 	background-color: rgb(242,185,13);
 	padding: 0.6em 0;
	margin: 0;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	}

.nGetJoyHeadline {
	font-size: 1.25rem;	/*20px*/
 	color: rgb(196,0,0);
 	text-align: center;
	font-weight: bold;
 	padding: 0;
	margin: 0;
	animation: bc-zoom-ani 0.3s ease-in;
	}


/*	------------ Sidebar --------------------*/


.nGetJoySidebarBack {
	background-color: rgb(230,230,230);
 	padding: 2rem 0;
	margin: 0 1.5rem;
	}

.sidebar-kategorie-titel {
	max-width: 200px;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	}

.sidebar-kategorie-titel p {
font-size: 0.94rem !important;
	color: white !important;
	font-weight: bold;
	}

.sidebar-konzerthighlights, .sidebar-termin, .sidebar-info {
	max-width: 200px;
	background-color: white;
	margin-bottom: 0.125rem;
	}

.sidebar-konzerthighlights {
	margin-bottom: 1.25rem;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	}

.sidebar-termin:last-child {
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	}

.sidebar-info:last-child {
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	}

.nGetJoySidebarInhalt {
	max-width: 172px;
	color: black;
 	background-color: transparent;
 	padding: 0.875rem;
	}

.nGetJoySidebarInhalt img {
	max-width:172px;
	border-radius: 0.5em;
	}



/*	------- Inhaltsbereich / Content / <main> ------ */


.seiten-info {
	/* temporär dummy */
	}

.nGetJoyInhaltContainer {
 	color: black;
 	background-color: rgb(230,230,230);
	margin: 2rem 0.625rem;
	}

.nGetJoyInhaltContainer img {
	border-radius: 0.75em;
	}

.nGetJoyInhaltRahmen {
	max-width: 620px;
	background-color: rgb(255,255,255);
 	padding: 1.25rem 1.25rem;
	border-radius: 0.75em;
	}

.GetJoyBildtext3 {
	color: black;
 	font-weight: normal;
 	font-style: normal;
 	text-decoration: none;
	line-height: 1.35;
 	background-color: rgb(255,255,255);
 	padding: 3em 3em;
	}


/*	-------------- Fuß-Navigation -----------------*/


.bc-fuss-container {
	display: table;
	max-width: 1100px;
	background-color: black;
	text-align: left;
	line-height: 1.35;
	padding: 2.5rem 0;
	margin: 0 auto;
	}

.bc-fuss1 {
	display: table-cell;
	width: 240px;
	}

.bc-fuss2 {
	display: table-cell;
	width: 240px;
	}

.bc-fuss3 {
	display: table-cell;
	width: 230px;
	}

.bc-fuss4 {
	display: table-cell;
	width: 390px;
	padding: 0.625rem 0 0.125rem 0;
	vertical-align: top;
	}

.bc-fuss4-img {
	max-width: 100%;
	height: auto;
	float: left;
	margin: 0 1.5rem 0 0;
	}

.bottomNavigationBackground {
	display: block;
	max-width: 160px;
	color: white;
	font-size: 0.875rem;	/*14px*/
	margin: 0.25rem 0.5rem;
	}

.bottomNavigation li a:hover {
	color: white;
	background-color: rgb(77,77,77);
	border-radius: 1em;
	}

.bcHighlightBackground {
	display: block;
	color: white !important;
	font-size: 0.7rem !important;		/*11px*/
	padding: 0.5rem 0 0.5rem 5.25rem;
	margin-top: 2rem;
	border-radius: 1em;
	transition: background-color 0.6s ease-in-out;
	}

.bcHighlightHover :hover {
	color: white;
	background-color: blue;
	border-radius: 1em;
	}


/*	----------------- Animation ------------------- */


@keyframes bc-zoom-ani {
	0%   {  transform: scale(0.2);  }
	25%  {  transform: scale(0.4);  }
	50%  {  transform: scale(0.6);  }
	75%  {  transform: scale(0.8);  }
	100% {  transform: scale(1.0);  }
	}



/*
	------- Definitionen Smartphone / kl. Tablet--------

	Raster mit 3 Spalten, davon 2 Spalten L+R Rand
	( column 1 / 2 und 4 / 5 )
	screen bis 668px

	-----------------------------------------------------
*/


@media screen and (max-width: 41.75em) {


.bc-grid {
	max-width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto auto auto;
	background-color: rgb(230,230,230);
	margin: 0 auto;
	}

.bc-header {
	grid-column: 1 / 4;
	grid-row: 1 / 2;
	color: white;
	background-color: black;
	}

.bc-header-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: auto;
	z-index: 900;
	}

.bc-content {
	grid-column: 1 / 4;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	justify-self: center;
	}

.bc-footer {
	grid-column: 1 / 4;
	grid-row: 3 / 4;
	color: white;
	background-color: black;
	margin-top: 2em;
	}


/*	----- Mobile-Navigation und Sidebar Smartphone-----------*/


.leftNavigation li a:visited {
	background-color: rgb(230,230,230) !important;
	}

.bc-nav {
	position: fixed;
	width: 250px;
	left: -300px;
	max-height: 0;
	transition: transform 0.5s ease;
	z-index: 800;
	}

.nGetJoyNaviBack {
	font-size: inherit;
 	color: black;
 	font-weight: normal;
 	font-style: normal;
	text-align: left;
 	background-color: rgb(230,230,230);
 	padding: 1.75rem 1rem 1.25rem 1rem;
	margin-top: calc(9em - 0.5rem);
	}

#menu:target nav {
	width: 250px;
	max-height: 90%;
	display: inline-block;
	transform: translate(300px);
	border-radius: 0.75em;
	box-shadow: 1.25em 1.25em 0.75rem -0.75rem rgb(127,127,127);
	overflow: auto;
	}

.bc-aside {
	display: block;
	position: fixed;
	width: 200px;
	right: -300px;
	max-height: 0;
	background-color: rgb(230,230,230);
	transition: transform 0.5s ease;
	z-index: 700;
	}

.nGetJoySidebarBack {
	display: block;
	width: 200px;
	background-color: rgb(230,230,230);
 	padding: calc(9em + 1rem) 0;
	margin: 0 0 0 5rem;
	}

.nGetJoySidebarBack img {
	display: block;
	margin: 0 auto;
	}

.sidebar-kategorie-titel {
	max-width: 200px;
	}

.sidebar-konzerthighlights, .sidebar-termin, .sidebar-info {
	max-width: 200px;
	}

.nGetJoySidebarInhalt {
	max-width: 200px;
 	padding: 0.875rem;
	}

#sidebar:target aside {
	display: block;
	width: 100%;
	max-height: 100%;
	transform: translate(-300px);
	overflow: auto;
	}


/*	---- Webseiten-Kopf / Head Smartphone -------- */


.getjoy-img-logo {
	display: none;
	}

.getjoy-img-logo-mobile {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	padding: 0;
	margin: 0 auto;
	}

.getjoy-img-banner-head {
	display: none;
	}

.nGetJoyHeadlineBack {
 	background-color: rgb(242,185,13);
 	padding: 0.3em 0;
	margin: 0;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	}

.nGetJoyHeadline {
	font-size: 0.815rem;	/*13px*/
 	color: rgb(196,0,0);
 	text-align: center;
	font-weight: bold;
 	padding: 0;
	margin: 0;
	animation: bc-zoom-ani 0.3s ease-in;
	}


/*	-----Inhaltsbereich / Content / <main> Smartphone----- */


.nGetJoyInhaltContainer {
	margin: calc(9em + 1rem) 0.625rem 1em 0.625rem;
	}


/*	------- Fuß-Navigation Smartphone -----------*/


.bc-fuss-container {
	display: table;
	max-width: 100%;
	background-color: black;
	text-align: left;
	line-height: 1.35;
	padding: 0.5rem 0;
	margin: 0 auto;
	}

.bc-fuss1 {
	display: none;
	}

.bc-fuss2 {
	display: none;
	}

.bc-fuss3 {
	display: none;
	}

.bc-fuss4 {
	display: table-cell;
	width: 320px;
	padding: 0 0 0.625rem 0;
	vertical-align: top;
	}

.bc-fuss4-img {
	width: 12%;
	height: auto;
	float: left;
	margin: 0.5em 1.5rem 0 0;
	}

.bottomNavigationBackground {
	display: none;
	}

.bcHighlightBackground {
	display: none;
	color: white !important;
	font-size: 0.7rem !important;		/*11px*/
	margin-top: 2rem;
	border-radius: 1em;
	transition: background-color 0.6s ease-in-out;
	}


}  /* Ende Breakpoint Smartphone / kl. Tablet */



/*
	---------- Definitionen mittl. Tablet ---------------

	Raster mit 4 Spalten, davon 2 Spalten L+R Rand
	( column 1 / 2 und 4 / 5 )
	screen min. 668px, max. 960px

	-----------------------------------------------------
*/


@media screen and (min-width: 41.75em) and (max-width: 60em) {


.bc-grid {
	max-width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto auto 196px auto;
	background-color: rgb(230,230,230);
	margin: 0 auto;
	}

.bc-header {
	grid-column: 1 / 5;
	grid-row: 1 / 2;
	color: white;
	background-color: black;
	}

.bc-header-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: auto;
	z-index: 900;
	}

.bc-content {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	}

.bc-aside {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	border-bottom-right-radius: 2em;
	}

.bc-footer {
	grid-column: 1 / 5;
	grid-row: 3 / 4;
	color: white;
	background-color: black;
	margin-top: 2em;
	}


/*	-------- Webseiten-Kopf / Head mittl. Tablet-----------*/


.getjoy-img-logo {
	max-width: 95%;
	}

.getjoy-img-banner-head {
	max-width: 85%;
	height: auto;
	margin: 0 auto;
	}

.nGetJoyHeadline {
	font-size: 1.05rem;	/*17px*/
	}


/*	------Mobile Navigation mittl. Tablet------*/


.bc-mobile-menu-container {
	font-size: 0.815rem;
	}

.bc-mobile-menu-button {
	padding: 0.3rem 0.8rem 0.3rem 0;
	}

.bc-mobile-infos-und-termine-button {
	display: none;
	}

.leftNavigation li a:visited {
	background-color: rgb(230,230,230) !important;
	}

.bc-nav {
	position: fixed;
	width: 250px;
	left: -300px;
	max-height: 0;
	transition: transform 0.6s ease;
	z-index: 800;
	}

.nGetJoyNaviBack {
	font-size: inherit;
 	color: black;
 	font-weight: normal;
 	font-style: normal;
	text-align: left;
 	background-color: rgb(230,230,230);
 	padding: 2rem 1rem 1.25rem 1rem;
	margin-top: calc(19em + 1rem);
	}

#menu:target nav {
	width: 250px;
	max-height: 95%;
	display: inline-block;
	transform: translate(300px);
	border-radius: 0.75em;
	box-shadow: 1.25em 1.25em 0.75rem -0.75rem rgb(127,127,127);
	overflow: auto;
	}


/*	--------------- Sidebar mittl. Tablet--------------------*/


.nGetJoySidebarBack {
 	padding: calc(21em + 1rem) 0;
	margin: 0 0.75rem;
	}

.nGetJoySidebarInhalt {
	max-width: 172px;
	color: black;
 	background-color: transparent;
 	padding: 0.875rem;
	}

.nGetJoySidebarInhalt img {
	max-width: 100%;
	border-radius: 0.5em;
	}



/*	-----Inhaltsbereich / Content / <main> mittl. Tablet----- */


.nGetJoyInhaltContainer {
	margin: calc(21em + 1rem) 0.625rem 1em 0.625rem;
	}


/*	----------- Fuß-Navigation mittl. Tablet ------------------*/


.bc-fuss-container {
	display: table;
	max-width: 100%;
	background-color: black;
	text-align: left;
	line-height: 1.35;
	padding: 0.5rem 0;
	margin: 0 auto;
	}

.bc-fuss1 {
	display: none;
	}

.bc-fuss2 {
	display: none;
	}

.bc-fuss3 {
	display: none;
	}

.bc-fuss4 {
	display: table-cell;
	width: 320px;
	padding: 0.625rem 0 0.625rem 0;
	vertical-align: top;
	}

.bottomNavigationBackground {
	display: none;
	}

.bcHighlightBackground {
	display: none;
	color: white !important;
	font-size: 0.7rem !important;		/*11px*/
	margin-top: 2rem;
	border-radius: 1em;
	transition: background-color 0.6s ease-in-out;
	}


}  /* Ende Breakpoint mittl. Tablet */




/*
	------------- Definitionen gr. Tablet ---------------

	Raster mit 4 Spalten, davon 2 Spalten L+R Rand
	( column 1 / 2 und 4 / 5 )
	screen min. 960px, max. 1140px

	-----------------------------------------------------
*/


@media screen and (min-width: 60em) and (max-width: 71.25em) {


.bc-grid {
	max-width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto 640px 240px auto;
	background-color: rgb(230,230,230);
	margin: 0 auto;
	}

.bc-header {
	grid-column: 1 / 5;
	grid-row: 1 / 2;
	color: white;
	background-color: black;
	}

.bc-header-fixed {
	position: fixed;
	top: 0;
	width: 100%;
	height: auto;
	z-index: 900;
	}

.bc-content {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	}

.bc-aside {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	border-bottom-right-radius: 2em;
	}

.bc-footer {
	grid-column: 1 / 5;
	grid-row: 3 / 4;
	color: white;
	background-color: black;
	margin-top: 2em;
	}


/*	-------- Webseiten-Kopf / Head gr. Tablet-----------*/


.getjoy-img-logo {
	max-width: 90%;
	}

.getjoy-img-banner-head {
	max-width: 85%;
	height: auto;
	margin: 0 auto;
	}

.nGetJoyHeadline {
	font-size: 1.125rem;	/*18px*/
	}


/*	-------------Mobile Navigation gr. Tablet------------*/


.bc-mobile-menu-container {
	font-size: 0.815rem;
	}

.bc-mobile-menu-button {
	padding: 0.3rem 0.8rem 0.3rem 0;
	}

.bc-mobile-infos-und-termine-button {
	display: none;
	}

.leftNavigation li a:visited {
	background-color: rgb(230,230,230) !important;
	}

.bc-nav {
	position: fixed;
	width: 250px;
	left: -300px;
	max-height: 0;
	transition: transform 0.6s ease;
	z-index: 800;
	}

.nGetJoyNaviBack {
	font-size: inherit;
 	color: black;
 	font-weight: normal;
 	font-style: normal;
	text-align: left;
 	background-color: rgb(230,230,230);
 	padding: 2rem 1rem 1.25rem 1rem;
	margin-top: calc(22em + 1rem);
	}

#menu:target nav {
	width: 250px;
	max-height: 98%;
	display: inline-block;
	transform: translate(300px);
	border-radius: 0.75em;
	box-shadow: 1.25em 1.25em 0.75rem -0.75rem rgb(127,127,127);
	overflow: auto;
	}


/*	--------------- Sidebar gr. Tablet------------------*/


.nGetJoySidebarBack {
 	padding: calc(25em + 1rem) 0;
	margin: 0 1.25rem;
	}


/*	-----Inhaltsbereich / Content / <main> gr. Tablet----- */


.nGetJoyInhaltContainer {
	margin: calc(25em + 1rem) 0.625rem 1em 0.625rem;
	}




/*	----------- Fuß-Navigation gr. Tablet -----------------*/


.bc-fuss-container {
	display: table;
	max-width: 100%;
	background-color: black;
	text-align: left;
	line-height: 1.35;
	padding: 0.5rem 0;
	margin: 0 auto;
	}

.bc-fuss1 {
	display: none;
	}

.bc-fuss2 {
	display: none;
	}

.bc-fuss3 {
	display: none;
	}

.bc-fuss4 {
	display: table-cell;
	width: 320px;
	padding: 0.625rem 0 0.625rem 0;
	vertical-align: top;
	}

.bottomNavigationBackground {
	display: none;
	}

.bcHighlightBackground {
	display: none;
	color: white !important;
	font-size: 0.7rem !important;		/*11px*/
	margin-top: 2rem;
	border-radius: 1em;
	transition: background-color 0.6s ease-in-out;
	}


}  /* Ende Breakpoint gr. Tablet */



/*
	------------- Definitionen Desktop -------------

	Raster mit 5 Spalten, davon 2 Spalten L+R Rand
	( column 1 / 2 und 5 / 6 )
	sreen min. 1140px

	-----------------------------------------------------
*/


@media screen and (min-width: 71.25em) {


.bc-grid {
	max-width: 100%;
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto 250px 640px 250px auto;
	background-color: white;
	margin: 0 auto;
	}

.bc-header {
	grid-column: 1 / 6;
	grid-row: 1 / 2;
	color: white;
	background-color: black;
	}

.bc-header-fixed {
	position: static;			/* reset aus Smartphone/Tablet (position: fixed) */
	left: 0;
	z-index: 1;
	}

.bc-nav {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	border-bottom-left-radius: 2em;
	}

.bc-content {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	}

.bc-aside {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
	background-color: rgb(230,230,230);
	border-bottom-right-radius: 2em;
	}

.bc-footer {
	grid-column: 1 / 6;
	grid-row: 3 / 4;
	color: white;
	background-color: black;
	margin-top: 2em;
	}

.bc-mobile-menu-container {		/* mobile-menu deaktivieren */
	display: none;
	}


}  /* Ende Breakpoint Desktop */





/*
	-------------- Definitionen Geräte-"Exoten"  ------------------

	Smartphone/kl. Tablet im Querformat
	mit max. height 600px

	---------------------------------------------------------------
*/



@media screen and (max-height: 37.5em) {


.getjoy-img-logo {
	max-width: 75%;
	}

.getjoy-img-banner-head {
	display:none;
	}

.nGetJoyHeadline {
	font-size: 0.9rem;	/*15px*/
	}

.nGetJoyNaviBack {
	margin-top: calc(10.5em + 1rem);
	}

.nGetJoySidebarBack {
 	padding: calc(12.25em + 1rem) 0;
	}

.nGetJoyInhaltContainer {
	margin: calc(12.25em + 1rem) 0.625rem 1em 0.625rem;
	}


}  /* Ende Breakpoint Geräte-"Exoten" */




/*	------ ENDE Style-Definitionen ---------------- */