/* -- Status des Ladens -- */

#diner-state {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 15px 0;
	white-space: nowrap;
	text-align: center;
	letter-spacing: 1px;
	background-color: var(--state-background);
	border-bottom: 1px solid var(--color-panel);
	box-shadow: 0 0 5px 1px rgba( 0, 0, 0, 0.24 );
}

#diner-state > i {
	position: absolute;
	left: 10px;
	font-size: 20pt;
}

#diner-state.opened {
	color: var(--state-opened);
}

#diner-state.notice {
	color: var(--state-notice);
}

#diner-state.closed {
	color: var(--state-closed);
}

#diner-state .state-text {
	font-size: 16pt;
	font-weight: 700;
	font-variant: small-caps;
	margin-left: 8px;
}

#diner-state:not(.notice) .state-time {
	display: none;
}

#diner-state .state-time {
	position: relative;
	top: 1px;
	font-weight: 600;
	color: var(--text-disabled);
	margin-left: 8px;
}

/* -- Öffnungszeiten -- */

#hours-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 120px;
	right: 0;
	width: 48px;
	height: 60px;
	color: var(--menu-color);
	cursor: pointer;
	font-size: 22pt;
	opacity: 0.87;
}

#hours-toggle > i {
	transition: transform 0.2s ease-in-out;
}

#opening-hours {
	position: absolute;
	top: 190px;
	left: 10px;
	max-height: 0;
	width: calc( 100vw - 20px );
	background-color: var(--color-background-lucent);
	transition: max-height 0.2s ease-in-out;
	overflow: auto;
}

#hours-state {
	display: none;
}

#hours-state:checked ~ #opening-hours {
	max-height: calc( 100vh - 274px );
	box-shadow: 0 0 5px 2px rgba( 0, 0, 0, 0.38 );
	border-radius: 3px;
	z-index: 1001;
}

#hours-state:checked ~ #hours-toggle > i {
	transform: rotate(180deg);
}

#hours-content {
	width: 100%;
	padding: 8px;
	border-spacing: 0;
	border: 0;
}

#hours-content td {
	position: relative;
	padding: 8px;
	line-height: 1.5;
	vertical-align: top;
	border-bottom: 1px solid var(--hours-border);
}

#hours-content td:last-child {
	text-align: right;
	white-space: nowrap;
}

#hours-content tr:first-child td {
	font-weight: 700;
}

#hours-content tr:last-child td {
	border-bottom: 0;
}

#hours-content tr.special-hours td {
	color: var(--hours-highlight);
}

#hours-content tr:not(:first-child).special-hours td:first-child {
	font-weight: 600;
}

#hours-content tr.special-hours td:first-child {
	padding-left: 30px;
}

#hours-content tr.special-hours td:first-child > p {
	position: relative;
	left: -20px;
	font-size: 10pt;
	font-weight: 400;
	color: var(--text-secondary);
	padding: 2px 0;
}

#hours-content tr.special-hours td:first-child > i {
	position: absolute;
	top: 5px;
	left: 7px;
	font-size: 14pt;
}

/* -- Telefon- und Faxnummer -- */

#phone-details {
	display: flex;
	justify-content: center;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 15px 0;
	background-color: var(--color-background);
	border-top: 1px solid var(--color-panel);
	box-shadow: 0 0 5px 1px rgba( 0, 0, 0, 0.24 );
	z-index: 1001;
}

#contact a {
	display: inline-flex;
	align-items: center;
	color: var(--contact-number);
	font-size: 15pt;
	white-space: nowrap;
}

#contact .button {
	color: var(--text-light-primary);
	padding: 8px 12px;
	background-color: var(--contact-background);
	border-radius: 50px;
}

#contact i,
#contact p {
	display: inline-block;
}

#contact .label {
	display: none;
}

#contact .number {
	padding: 6px;
	font-size: 16pt;
	margin-left: 8px;
}

#details > div:not(#opening-hours), #fax-details {
	display: none;
}

/* -- Sidebar Content -- */

#details .restday {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-weight: 600;
}

#details .restday > span {
	display: inline-block;
	margin: 0 5px;
}

/* -- Lieferungsdetails -- */

#delivery {
	width: 100%;
}

#delivery .condition {
	display: flex;
	color: var(--delivery-color);
	background-color: var(--delivery-background);
	border-radius: 4px;
}

#delivery .condition-icon {
	flex-basis: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15pt;
	background-color: var(--delivery-icon);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

#delivery .condition-text {
	flex-grow: 1;
	font-size: 11pt;
	padding: 12px 4px;
	text-align: center;
}

#new-meals {
	width: 100%;
	font-size: 11pt;
	text-align: center;
	padding: 10px 0;
	margin-top: 15px;
	border: 2px solid var(--item-highlight);
	background-color: var(--item-hint-background);
	border-radius: 4px;
}

#new-meals .new-meal-hint {
	font-weight: 600;
}

#new-meals > p {
	display: inline-block;
	margin: 0 4px;
}

/* -- Extra small ------------------------------------------------------------------------------ */

@media screen and (min-width: 349.98px) {
	/* -- Telefon- und Faxnummer -- */
	
	#contact .label {
		display: inline-block;
		padding: 0 5px;
	}

	#new-meals {
		font-size: unset;
		padding: 10px 5px;
	}
	
	#delivery .condition-icon > i {
		position: relative;
		top: -1px;
	}

	#delivery .condition-text {
		font-size: unset;
	}
	
	#delivery .condition-icon {
		flex-basis: 40px;
		font-size: 18pt;
	}
}

/* -- Small ------------------------------------------------------------------------------------ */

/*
@media screen and (min-width: 575.98px) {	
}
*/

/* -- Medium ----------------------------------------------------------------------------------- */

@media screen and (min-width: 767.98px) {
	/* -- Status des Ladens -- */

	#diner-state {
		position: absolute;
		top: -240px;
		left: unset;
		right: 25px;
		width: auto;
		padding: 12px 40px 12px 15px;
		border-bottom: none;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	#diner-state > i {
		position: initial;
		font-size: 14pt;
	}

	#diner-state .state-text {
		font-size: 14pt;
	}

	#diner-state .state-time {
		top: 0;
	}

	/* -- Öffnungszeiten -- */

	#hours-toggle {
		top: -240px;
		left: unset;
		right: 30px;
		font-size: 20pt;
		width: 40px;
		height: 50px;
	}

	#opening-hours {
		position: absolute;
		top: -175px;
		left: unset;
		right: 25px;
		width: 350px;
		height: unset;
	}

	#hours-state:checked ~ #opening-hours {
		max-height: calc( 100vh - 235px );
	}

	#hours-content {
		font-size: 12pt;
	}

	/* -- Telefon- und Faxnummer -- */

	#contact .label {
		display: inline-block;
	}

	#contact .number {
		display: inline-block;
	}
}

/* -- Large ------------------------------------------------------------------------------------ */

@media screen and (min-width: 991.98px) {
	/* -- Status des Ladens -- */

	#diner-state {
		width: 225px;
		left: 0;
		right: unset;
		padding: 8px 12px;
	}

	#diner-state .state-text {
		font-size: 12pt;
		margin-left: 5px;
	}

	#diner-state .state-time {
		font-size: 11pt;
	}

	/* -- Öffnungszeiten -- */

	#hours-toggle {
		display: none;
	}

	#opening-hours {
		position: relative;
		max-height: 100%;
		top: unset;
		left: unset;
		right: unset;
		width: 235px;
		color: var(--text-light-primary);
		background-color: var(--sidebar-background);
	}

	#hours-state:checked ~ #opening-hours {
		box-shadow: none;
		border-radius: 0;
	}

	#hours-content {
		font-size: 10pt;
		padding: 0;
	}

	#hours-content td:first-child {
		padding: 8px 0 8px 15px;
	}

	#hours-content td:last-child {
		padding: 8px 15px 8px 0;
	}

	#hours-content tr.special-hours td {
		font-weight: 600;
	}

	#hours-content tr.special-hours td:first-child > p {
		color: var(--text-light-secondary);
	}

	#hours-content tr.special-hours td:first-child > i {
		font-size: 12pt;
		top: 6px;
		left: 10px;
	}

	/* -- Pfeil auf Kontakt -- */

	#arrow {
		display: none;
		position: absolute;
		top: 43px;
		left: 0px;
		width: 100%;
		height: 197px;
		background-image: url(images/arrow.png);
		background-repeat: no-repeat;
		background-position: center;
	}

	#diner-state:hover #arrow {
		display: block;
	}

	/* -- Telefon- und Faxnummer -- */

	#phone-details {
		display: inline-block;
		position: initial;
		padding: 15px 20px 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		z-index: unset;
	}

	#fax-details {
		padding: 0 20px;
	}

	#contact a {
		display: block;
		color: var(--text-light-primary);
	}

	#contact .button {
		position: relative;
		color: var(--contact-label);
		padding: 4px 0 0 0;
		margin-left: 2px;
		line-height: 1.1;
		background-color: transparent;
		border-radius: unset;
	}

	#contact .label {
		padding: 0;
		margin-left: 8px;
		display: inline-block;
	}

	#contact .number {
		display: block;
		padding: 0 0 8px 0;
		margin-left: 0;
		font-size: 20pt;
		text-align: center;
		letter-spacing: 1px;
		text-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.64 );
	}

	#fax-details .button {
		font-size: 10pt;
	}

	#details > div:not(#opening-hours), #fax-details {
		display: block;
	}

	#details > div:not(#opening-hours) {
		color: var(--text-light-primary);
		background-color: var(--sidebar-background);
	}

	#details > div:not(#opening-hours) > p {
		padding: 10px 0 10px 15px;
		line-height: 1.8;
	}

	/* -- Lieferungsdetails -- */

	#delivery .condition-text {
		text-align: left;
		padding-left: 12px;
		font-weight: 600;
	}

	#new-meals {
		font-weight: 600;
	}
}

/* -- Extra large ------------------------------------------------------------------------------ */

/*
@media screen and (min-width: 1199.98px) {
}
*/

/* -- Extra extra large ------------------------------------------------------------------------ */

/*
@media screen and (min-width: 1399.98px) {
}
*/