/*  Peter & The Foxes
    Main Styling
*/

@import url("fontawesome-all.min.css");
@import url("fonts.css");

:root {
/*  Color definitions*/
  --primary-color: #1297a6;
  --secondary-color: #fef7cb;
  --tertiary-color: #413201;
  --background-color: #F9F9F9;
  --accent-color: #F33F14;

  --text-dark-color: var(--tertiary-color);
  --text-light-color: var(--background-color);
  --link-underline-dark-color: rgba(65, 50, 1, 0.5);
  --link-underline-light-color: rgba(249, 249, 249, 0.5);

  --placeholder-color: #555;
  
  --header-text-color: var(--text-light-color);  
  --header-icons-color: #41484c;
  --header-icons-hover-color: var(--text-light-color);

  --footer-background-color: #413201;
  --footer-text-color: var(--text-light-color);

  --logo-text-color: var(--text-light-color);

  --nav-background-color: #222629;
  --nav-text-color: rgba(255, 255, 255, 0.5);
  --nav-link-color: #41484c;
  --nav-link-highlight-color: rgba(0, 0, 0, 0.15);
  --nav-link-hover-color: var(--primary-color);

  --success-color: #266B06;
  --warning-color: #AA6203;
  --error-color: var(--accent-color);

  --select-hover-color: #ddd;

  --button-text-color: var(--text-light-color);
  --button-background-color: var(--accent-color);
  --button-hover-color: white;
  --button-active-color: var(--text-light-color);

  --input-background-color: #8ebebc;
  --input-border-color: #8ebebc;

  --th-text-color: var(--text-light-color);
  --th-background-color: #222729;
  --tableCategory-color: #66c6d1;
  --tfoot-background-color: #eee;
  --table-alternate-row-color: #f5f2e9;
  --tableSumTotal-color: #dcd6c2;

  --card-background-color: var(--input-background-color);
  --card-text-color: var(--text-dark-color);
  --card-header-background-color: var(--primary-color);
  --card-header-text-color: var(--text-dark-color);
  --card-header-border-color-color: var(--text-dark-color);
  --card-footer-background-color: var(--secondary-color);
  --card-footer-text-color: var(--text-dark-color);
  --card-footer-border-color: var(--text-dark-color);
  
/*  Font sizes */
  --base-font-size: 18px;
  --h2-font-size: 4.5rem;
  --h3-font-size: 3rem;
  --h4-font-size: 2.5rem;
  --h5-font-size: 2rem;

/*  Fonts */
  --font-sans: 'Fira Sans', sans-serif;
  --font-serif: 'Lobster Sans', sans-serif;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;

	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Basic */
    body {
        -webkit-text-size-adjust: none;
        background: var(--background-color);
        font-family: var(--font-sans);
		font-size: var(--base-font-size);
        font-weight: 300;
        line-height: 1.35em;
        color: var(--text-dark-color);
    }

    body.is-preload *, body.is-preload *:before, body.is-preload *:after {
        -moz-animation: none !important;
        -webkit-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    html {
        box-sizing: border-box;
    }

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

    h1 { /* h1 is moved outside the page, only to be used for screen readers*/
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
    h2 { font-size: var(--h2-font-size); }
    h3 { font-size: var(--h3-font-size); }
    h4 { font-size: var(--h4-font-size); }
    h5 { font-size: var(--h5-font-size); }

    h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
		line-height: 1.5em;
		font-family: var(--font-serif);
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}

    strong, b { font-weight: 600; }

    em, i { font-style: italic;	}

    ol, ul { list-style: none; }

    blockquote, q { 
        quotes: none; 
        border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
    }

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

    p, ul, ol, dl, table {
		margin-bottom: 2em;
	}

	br.clear {
		clear: both;
	}

    table {
	    border-collapse: collapse;
	    border-spacing: 0;
    }   
 
    mark {
	    background-color: transparent;
	    color: inherit;
    }   

    input::-moz-focus-inner {
	    border: 0;
	    padding: 0;
    }

    input, select, textarea {
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    -ms-appearance: none;
	    appearance: none;
        font-family: var(--font-sans);
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.25rem;
    }

    
	header {
		margin: 0 0 2em 0;
	}

		header > p {
			margin: 1em 0 0 0;
		}

	footer {
		margin: 2em 0 0 0;
	}

    a {
		text-decoration: none;
		color: inherit;
		border-bottom: dotted 1px var(--link-underline-color);
		-moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		outline: 0;
	}

		a:hover {
			color: var(--primary-color);
			border-bottom-color: var(--text-dark-color);
		}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}


/* GENERAL ELEMENTS */

/* Container */
    .container {
        width: 1400px;
		margin: 0 auto;
		max-width: 100%;
	}

		@media screen and (min-width: 961px) and (max-width: 1880px) {
			.container { width: 1200px; }
		}

		@media screen and (min-width: 961px) and (max-width: 1620px) {
			.container { width: 960px; }
		}

		@media screen and (min-width: 961px) and (max-width: 1320px) {
			.container { width: 100%; }
		}

		@media screen and (max-width: 960px) {
			.container { width: 100%; }
		}

		@media screen and (max-width: 736px) {
			.container { width: 100%;}
		}

/* Sections/Article */

	section, article {
		margin-bottom: 3em;
	}

		section > :last-child,
		section > .container, section:last-child, article > :last-child,
		article > .container, article:last-child {
			margin-bottom: 0;
		}

		.row > section, .row > article {
			margin-bottom: 0;
		}
/* Image */

	.image {
		display: inline-block;
		border: 0;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.mainstage {
			
			max-width: 800px;
  			width: 100%;
  			height: auto;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}
/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* List-Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;		
	}

		ul.icons li {
			display: inline-block;
			padding-left: 0;
			font-size: 1.5rem;
		}

		ul.icons a {
			display: inline-block;
			width: 2em;
			height: 2em;
			line-height: 2em;
			text-align: center;
			border: 0;
		}

/* Datagrid */

    .datagrid {		
		max-width: 100%;
		margin-bottom: 1em;
	}

	.datagrid-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em; /* optionaler Abstand */
	margin-bottom: 0.5em;
	}

		.datagrid-row input {
			position: relative;
			appearance: none;
			display: block;
			border: 0;
			outline: 0;
			background: rgba(255, 255, 255, 0.75);
			width: 100%;
			border-radius: 0.25em;
			padding: 0.5em 0.75em;
			box-shadow: inset 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
			border: solid 1px rgba(0, 0, 0, 0.15);
			transition: all 0.35s ease-in-out;
		}
	
		.datagrid-row .icon {
			text-decoration: none;
			text-decoration: none;
			width: 1.25em;
			height: 1.25em;
			cursor: pointer;	
		}


/* Icons */

	.icon {
		text-decoration: none;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

/* Button */


	button,
	.button {
		position: relative;
		display: inline-block;
		border-radius: 0.35em;
		color: var(--button-text-color) !important;
		text-decoration: none;
		padding: 0.75em 2.5em 0.75em 2.5em;
		background-color: var(--button-background-color);
		border: 0;
		cursor: pointer;
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url("images/overlay.png");
		-moz-transition: background-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out;
	}


		button:hover,
		.button:hover {
			background-color: var(--button-hover-color);
		}


		button:active,
		.button:active {
			background-color: var(--button-active-color);
		}

/* Form */

	form {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
			gap: 1.5em;
			padding-top: 1em;
			margin-bottom: 1em;
	}

		form .form-element {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			font-size: 0.85em;
		}

		form label {
			display: block;
			text-align: left;
			margin-bottom: 0.25em;
		}

		form .success-message,
		form .warning-message,
		form .error-message
		 {			
			font-size: 0.85em;
			margin-top: 5px;
			line-height: 1em;
		}

		form .success-message { color: var(--success-color); }

		form .warning-message { color: var(--warning-color); }

		form .error-message { color: var(--error-color); }

		form input,
		form select,
		form textarea {
			position: relative;
			-webkit-appearance: none;
			appearance: none;
			display: block;
			border: 0;
			outline: 0;
			background: #fff;
			background: rgba(255, 255, 255, 0.75);
			width: 100%;
			border-radius: 0.25em;
			padding: 0.5em 0.75em 0.5em 0.75em;
			box-shadow: inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.05);
			border: solid 1px rgba(0, 0, 0, 0.15);
			-moz-transition: all 0.35s ease-in-out;
			-webkit-transition: all 0.35s ease-in-out;
			-ms-transition: all 0.35s ease-in-out;
			transition: all 0.35s ease-in-out;
		}

		form input:focus
		{
			box-shadow: 0 0 2px 1px #8ebebc;
			background: #fff;
		}


		form input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 1.5em;
			height: 1.5em;
			border-radius: 0.2em;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(0,0,0,0.15);
			box-shadow: inset 0 0.1em 0.1em rgba(0,0,0,0.05);
			transition: all 0.2s ease-in-out;
			cursor: pointer;
			position: relative;
			margin: 0;
		}
		
			form input[type="checkbox"]:focus {
				box-shadow: 0 0 2px 1px #8ebebc;
				background: #fff;
				outline: none;
			}


			form input[type="checkbox"]:checked {
				background-color: var(--input-background-color);
				border-color: var(--input-border-color);
			}

			form input[type="checkbox"]:checked::after {
				content: "";
				position: absolute;
				left: 0.42em;
				top: 0.08em;
				width: 0.6em;
				height: 0.9em;
				border: solid #fff;
				border-width: 0 0.15em 0.15em 0;
				transform: rotate(45deg);
			}

			form .form-element.checkbox {
				flex-direction: row;
				align-items: center;
				gap: 0.6em;
			}
			form .form-element.checkbox > label {
				display: inline;
				margin: 0;
			}
	
	form textarea {
		min-height: 14em;
	}

	.selectList {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: white;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		margin-top: 4px;
		padding: 0;
		list-style: none;
		z-index: 1000;
	}

	.selectList li {
		padding: 5px;
		cursor: pointer;
	}

	.selectList li:hover {
		background-color: var(--select-hover-color);
	}

	.select-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
			flex-direction: column;
		flex: 1;
	}

		.select-wrapper input {
			flex: 1;
			width: 100%;
		}

	.hidden {
		display: none;
	}

/* Table */
	table {
		border-collapse: collapse;
		width: 100%;
	}
	th, td {
		padding: 8px;
		border: 1px solid #ccc;
		text-align: left;
		background-color: white;
	}
	th {
		cursor: pointer;
		background-color: var(--nav-background-color);
		color: var(--text-light-color);
		font-size: 1.25em;
		font-weight: 400;
	}


	th.sort-asc::after {
		content: " ↑";
		font-size: 0.8em;
	}

	th.sort-desc::after {
		content: " ↓";
		font-size: 0.8em;
	}



/* GENERAL SITE ELEMENTS */

/* GENERAL:Header */

	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		background: var(--nav-background-color) url("images/overlay.png");
		box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
		color: var(--header-text-color);
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		text-align: right;
		top: 0;
		width: 300px;
	}

		#header .top {
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
		}

		#header .bottom {
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			padding: 1.5em 0 0.75em 0;
		}

			#header .bottom > :last-child {
				margin-bottom: 0;
			}

		#header .icons {
			text-align: center;
		}

			#header .icons a {
				color: var(--header-icons-color);
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}

				#header .icons a:hover {
					color: var(--header-icons-hover-color);
				}

/* GENERAL:Logo */
    #logo {
            position: relative;
            margin: 1.75em 1.75em 2em 1.5em;
            padding: 1em;
            min-height: 48px;
            cursor: default;
        }

            #logo .image {
                position: absolute;
                left: 0;
                top: 0;
            }
    
/* GENERAL:Navigation */
    #nav ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
	}

		#nav ul li {
			padding-left: 0;
		}

			#nav ul li a {
				font-size: 1.25rem;
				display: block;
				padding: 0.5em 1.5em 0.5em 1.5em;
				color: var(--nav-text-color);
				text-decoration: none;
				outline: 0;
				border: 0;
				-moz-transition: none;
				-webkit-transition: none;
				-ms-transition: none;
				transition: none;
			}

				#nav ul li a span {
					position: relative;
					display: block;
				}

					#nav ul li a span:before {
						position: absolute;
						left: 0;
						color: var(--nav-link-color);
						text-align: center;
						width: 1.25em;
						line-height: 1.75em;
					}

				#nav ul li a.active {
					background: var(--nav-link-highlight-color);
					box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
					color: #fff;
				}

					#nav ul li a.active span:before {
						color: var(--nav-link-hover-color);
					}

/* GENERAL:Footer */
	#footer {
		margin-left: 300px;
		text-align: center;
		background-color: var(--footer-background-color);
		color: var(--footer-text-color);
		padding: 3em 0 4em 0;
		box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);		
	}
		#footer .large-text{ 
			font-family: var(--font-serif);
			color: var(--secondary-color);
			line-height: 1.6em;
		}

		#footer .copyright {
			cursor: default;
			margin: 0;
			font-size: 0.7rem;
		}

			#footer .copyright li {
				display: inline-block;
				line-height: 1em;
				border-left: solid 1px rgba(128, 128, 128, 0.35);
				padding: 0 0 0 0.5em;
				margin: 0 0 0 0.5em;
			}

				#footer .copyright li:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}

		#footer .logos {
			cursor: pointer;
			margin: 0;
		}

			#footer .logos li {
				display: inline-block;
				padding: 0 0 0 0.5em;
				margin: 0 0 0 0.5em;
			}

				#footer .logos li:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}

/* GENERAL:Main */

	#main {
		margin-left: 300px;
	}

		#main > section {
			margin: 0;
			overflow: hidden;
			padding: 4em 0;
			box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
			text-align: center;
			background-image: url("images/overlay.png");
		}

/* GENERAL:Sections: CTA */
			#main > section.cta {
				padding: 0.75em 0;
				background-color: var(--primary-color);
			}

			#main > section.cta a{
				display: inline-block;
				padding: 0.2em 0.5em;
				border: 1px solid;
				border-radius: 0.4em;
				background-color: transparent;
				text-decoration: none;
				transition: all 0.3s ease;
			}

			#main > section.cta a:hover {
				color: white;
			}
/* GENERAL:Sections: Cover */
			#main > section.cover {
				padding: 6em 0;
				background-size: cover;
				background-position: center center;
                background-color: var(--text-light-color);
				color: var(--text-light-color);
				font-family: 'Lobster Sans', sans-serif;
				background-image: url("../../images/stage-banner.jpg");
			}

/* GENERAL:Sections - Blue */
			#main > section.blue {
				background-color: var(--primary-color);
				font-family: 'Lobster Sans', sans-serif;
			}

			#main > section.blue h2{
				color: var(--secondary-color);
			}

			#main > section.blue a:hover{
				color: var(--text-light-color);
			}
/* GENERAL:Sections - Brown */
			#main > section.brown {
				color: var(--secondary-color);
				background-color: var(--tertiary-color);
			}

			#main > section.brown p{
				color: var(--text-light-color);
			}
/* GENERAL:Sections - White */
			#main > section.white {				
				background-color: var(--background-color);
			}

			#main > section.white h2{
				color: var(--accent-color);
			}
			
			#main > section.white h3{
				color: var(--primary-color);
			}


/* CUSTOM ELEMENTS */

/* Grid-Events */
	
    .grid-events {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        
    }

    .grid-events article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
		margin: 1rem;
    }

    .grid-events article header {
        margin: 1rem;
        font-size: 1.8rem;
		line-height: 2rem;
    }

    .grid-events article p {
		font-family: var(--font-sans);
        color: var(--text-light-color);
    }

/* Grid-Inhalt */

    .grid-inhalt {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        gap: 2em;
    }

        .grid-inhalt article {
            display: flex;
            flex-direction: column;
            height: 100%; 
            overflow: hidden;
        }

/* Feature-Item */
	.feature-item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2em;
		max-width: 100%;
		margin: 0 auto;
		flex-wrap: wrap;
	}

		.feature-item img {
		max-width: 30%;
		height: auto;
		}

		.feature-item .text {
		flex: 1;
		text-align: left;
		}

/* Songlist */
	.songlist .genre{
		color: var(--accent-color);
		font-size: 2.75em;
		font-family: 'Lobster Sans', sans-serif;
		margin-bottom: 2rem;
	}

		.songlist ul{
			list-style: none;
			margin-bottom: 3.5rem;
		}

		.songlist .song{
			padding-right: 0.3em;
		}

		.songlist .active-song {
			color: var(--accent-color);
		}

		.icon.pulse {
		animation: pulse 1s infinite;
		}

		@keyframes pulse {
		0%   { transform: scale(1); }
		50%  { transform: scale(1.2); }
		100% { transform: scale(1); }
		}

/* Signature */

	.signatureLine {
		margin-top: 4em;
	}

/* Booking Container */

	.booking-container {
		text-align: left;
	}

/* SongsContainer */
	.songsContainer {
		margin-bottom: 2em;
	}

		.songsContainer .addSongsButton {
			display: flex;
			justify-content: flex-end
		}

		.songsContainer .icon {
			text-decoration: none;
			text-decoration: none;
			width: 1.25em;
			height: 1.25em;
			cursor: pointer;
		}

/* Cards */

	.card-layout {
		display: flex;
		flex-direction: column;
		padding: 0.25rem;
		margin: 0 auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	.card {
		border: 1px solid var(--input-border-color);
		border-radius: 5px;
		overflow: hidden;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		color: var(--card-text-color);
		background-color: var(--card-background-color);
		width: 100%;
		padding: 0;
		margin-bottom: 0.75rem; 
		box-sizing: border-box;
	}

		.card .details {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			/*CHECKfont-size: 0.95rem;*/
			justify-content: flex-end;
			text-align: right;
		}


	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--card-header-background-color);
		color: var(--card-header-text-color);
		padding: 1.25rem;
		/*CHECKfont-size: var(--h5-font-size);*/
		font-weight: bold;
		border-bottom: 1px solid var(--card-header-border-color-color);
	}

	.card-body {
		padding: 1.25rem;
	}
		
		.card-body .beschreibung {
			margin: 0.5rem 0;
		}

	.card-footer {
		display: flex;
		align-items: center;
		background-color: var(--card-footer-background-color);
		color: var(--card-footer-text-color);
		padding: 1rem;
		border-top: 1px solid var(--card-footer-border-color);
		justify-content: flex-end;
		text-align: right;
	}

/* Portfolio */

	.pressLogos,
	.pressImages {
		display: grid;
        grid-template-columns: repeat(3, 1fr);
        font-family: 'Fira Sans', sans-serif;
        gap: 1.5em;
	}

	.pressImages .item header {
		text-align: left;
		padding-left: 1em;
	}


/* Item */

	.item,
	.item-dark {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
		
		 overflow: hidden;
	}
	.item { background-color: white; }
	.item-dark { background-color: black; }

	.item header,
	.item-dark header {
		margin-top: auto; /* schiebt das Header-Element nach unten */
		background: var(--nav-background-color);
		padding: 0em 0 1em 0;
		/*CHECKfont-size: 0.8em;*/
		color: var(--text-light-color);
	}

	.item header a:hover,
	.item-dark a:hover {
		color: var(--primary-color);
	}

	.item img,
	.item-dark img {
		display: block;
		margin: 0 auto;
	}

	.addEntryForm {
		display:none;
		margin-top:10px;
	}
	
	.action-icon {
		width: 1.2em;
		height: 1.2em;
		fill: var(--nav-link-color);
		cursor: pointer;
		transition: fill 0.2s ease;

	}
		.action-icon:hover {
			fill: var(--primary-color);
		}

	.json-table {
		table-layout: fixed;
		width: 100%;
		/*CHECKfont-size: 0.9em;*/
	}

	.json-table input {
		width: 100%;
		box-sizing: border-box;
		padding: 0.25em;
		margin: 0;
		border: none;
		border-bottom: 1px solid var(--nav-link-color);
		background-color: transparent;
		outline: none;
		transition: border-color 0.3s ease;		
	}

		.json-table input:hover {
			border-bottom-color: var(--primary-color);
			transition: background-color 0.3s ease;
		}

		.json-table input:focus {
			background-color: var(--background-color);
			border-bottom-color: var(--primary-color);
		}

		.json-table input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 1em;
			height: 1em;
			border-radius: 0.2em;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(0,0,0,0.15);
			box-shadow: inset 0 0.1em 0.1em rgba(0,0,0,0.05);
			transition: all 0.2s ease-in-out;
			cursor: pointer;
			position: relative;
			margin: 0;
		}
		
			.json-table input[type="checkbox"]:focus {
				box-shadow: 0 0 2px 1px #8ebebc;
				background: #fff;
				outline: none;
			}

			.json-table input[type="checkbox"]:checked {
				background-color: var(--input-background-color);
				border-color: var(--input-border-color);
			}

			.json-table input[type="checkbox"]:checked::after {
				content: "";
				position: absolute;
				left: 0.27em;
				top: 0.058em;
				width: 0.34em;
				height: 0.6em;
				border: solid #fff;
				border-width: 0 0.15em 0.15em 0;
				transform: rotate(45deg);
			}

			.json-table.checkbox {
				flex-direction: row;
				align-items: center;
				gap: 0.6em;
			}
			.json-table.checkbox > label {
				display: inline;
				margin: 0;
			}


	.json-table th .action-icon {
		fill: var(--text-light-color);
		padding-top: 0.25em;
		width: 1.5em;
		height: 1.5em;
	}

	.json-table th .action-icon:hover {
		fill: var(--primary-color);
	}

	.addEntry-container {
		display: flex;
		justify-content: flex-end;
	}

	.text-sans {
		font-family: var(--font-sans);
	}
	.text-serif {
		font-family: var(--font-serif);
	}
	.large-text {
		font-size: var(--h5-font-size);
		line-height: 2rem;
	}
	.slogan { font-size: var(--h2-font-size);}

	.event-icons {
		word-spacing: 1rem;
		font-size: 2rem;
		margin-bottom: 3rem;		
	}

	.event-icons a {
		border-bottom: none;
	}

	.event-icons a:hover {
		color: var(--text-light-color);
		border-bottom: none;
	}

/* BREAKPOINTS */

/* Desktop-small */

	@media screen and (min-width: 1201px) and (max-width: 1620px) {

		/* Main */
			#main > section { padding: 2.5em 0;}

			#main section.cover { padding: 4em 0; }

	}

/* Narrow */

	@media screen and (min-width: 1201px) and (max-width: 1320px) {

		/* Basic */

			.container { padding: 0 1em 0 1em; }

		/* Icons */

			ul.icons li a { width: 1.75em; }

	}

/* Narrower */


	@media screen and (max-width: 1200px) {

    /* Basic */

        html, body { overflow-x: hidden; }

        header br { display: none; }

        .container { padding: 0 2em 0 2em; }

    /* Icons */

        ul.icons a {
            width: 1.75em;
        }

    /* Header */

        #header {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform: translateX(-275px);
            -webkit-transform: translateX(-275px);
            -ms-transform: translateX(-275px);
            transform: translateX(-275px);
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            -webkit-overflow-scrolling: touch;
            display: block;
            height: 100%;
            left: 0;
            overflow-y: auto;
            position: fixed;
            top: 0;
            width: 275px;
            z-index: 10002;
            background: var(--nav-background-color) url("images/overlay.png");
            box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.125);
        }

            #header .top {
                position: relative;
            }

            #header .bottom {
                border-top: solid 1px rgba(255, 255, 255, 0.05);
                box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.15);
                padding-top: 2em;
                margin-top: 2em;
                position: relative;
            }

        #logo {
            margin: 1.5em 1.25em 1.25em 1.25em;
        }

        #nav ul li a {
            padding: 0.5em 1.25em 0.5em 1.25em;
        }

        #headerToggle {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            display: block;
            height: 2.25em;
            left: 0;
            position: fixed;
            top: 0;
            width: 3.25em;
            z-index: 10001;
        }

            #headerToggle .toggle {
                text-decoration: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                outline: 0;
                border: 0;
            }

                #headerToggle .toggle:before {
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: antialiased;
                    display: inline-block;
                    font-style: normal;
                    font-variant: normal;
                    text-rendering: auto;
                    line-height: 1;
                    text-transform: none !important;
                    font-family: 'Font Awesome 5 Free';
                    font-weight: 900;
                }

                #headerToggle .toggle:before {
                    text-decoration: none;
                    content: '\f0c9';
                    color: #fff;
                    background: rgba(128, 136, 144, 0.5);
                    border-radius: 0.35em;
                    text-align: center;
                    position: absolute;
                    left: 0.5em;
                    top: 0.5em;
                    display: block;
                    width: 3.25em;
                    height: 2.25em;
                    line-height: 2.25em;
                }

        body.header-visible #main {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        body.header-visible #headerToggle {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

        body.header-visible #header {
            -moz-transform: translateX(0);
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

    /* Footer */

        #footer { margin-left: 0; }

    /* Main */

        #main {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            padding-bottom: 1px;
            margin-left: 0;
        }

            #main > section { padding: 3em 0; }

            #main section.cover { padding: 4em 0; }
		
		
		.feature-item {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.feature-item .text {
			width: 100%;
			text-align: center;
		}

	}

/* Mobile */

	@media screen and (max-width: 736px) {

    /* Basic */

		body { font-size: 0.95rem;	}
        h2 { font-size: 3.5rem; }
		h3 { font-size: 2.5rem; }
		h4 { font-size: 2.25rem; }
		h5 { font-size: 1.75rem; }
		.large-text { font-size: 1.75rem; }



        .container {
            padding: 0 1em 0 1em;
        }

    /* Main */

        #main > section {
            padding: 1.75em 0;
        }

        #main section.cover {
            padding: 2.5em 0em;
        }

            #main section.cover header {
                padding: 0 1em;
            }
	
		form {	
			grid-template-columns: 1fr;
		}

    /* Grid-Events */

        .grid-events {
            grid-template-columns: 1fr;
            padding: 0 1em;
        }

		.grid-inhalt {
            grid-template-columns: 1fr;
            padding: 0 1em;
        }

		.pressLogos,
		.pressImages {
        	grid-template-columns: repeat(2, 1fr);
		}

	}

/* Mobile small */

	@media screen and (max-width: 480px) {

		h2 { font-size: 2.5rem; }
		h3 { font-size: 2rem; }
		h4 { font-size: 1.75rem; }
		h5 { font-size: 1.5rem; }

		.large-text { font-size: 1.5rem; }

		.pressLogos,
		.pressImages {
        	grid-template-columns: repeat(1, 1fr);
		}
	}