/* Lokal gehostete Schriften (kein Abruf bei Google Fonts) */

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/lato-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/lato-latin-400-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/lato-latin-700-normal.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/lato-latin-700-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/source-code-pro-latin-400-normal.woff2') format('woff2');
}

/* TSG-Stuben — warme Gastraum-Palette (abgestimmt auf Banner & Logo) */

:root {
	--tsg-gradient: linear-gradient(135deg, #f5f0e8 0%, #ebe6dc 50%, #f7f5f0 100%);
	--tsg-blue: #1a458b;
	--tsg-blue-hover: #133565;
	--tsg-wood: #4a3428;
	--tsg-bg: #f7f5f0;
	--tsg-surface: #fafaf8;
	--tsg-cream: #e8dfd3;
	--tsg-text: #3d3832;
	--tsg-text-muted: #6b6560;
	--tsg-border: #e5dfd6;
	--tsg-nav-border: rgba(74, 52, 40, 0.12);
}

/* Basis */

body,
input,
select,
textarea {
	color: var(--tsg-text-muted);
	background-color: var(--tsg-bg);
}

body strong,
body b {
	color: var(--tsg-text);
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
	color: var(--tsg-text);
}

a {
	color: var(--tsg-blue);
	border-bottom-color: var(--tsg-border);
}

a:hover {
	color: var(--tsg-wood) !important;
}

/* Sidebar */

#header {
	background: var(--tsg-gradient);
	color: var(--tsg-text-muted);
}

#header h1,
#header h2,
#header h3,
#header h4,
#header h5,
#header h6 {
	color: var(--tsg-blue);
}

#header h1 a,
#header h2 a,
#header h3 a,
#header h4 a,
#header h5 a,
#header h6 a {
	color: var(--tsg-blue);
}

#header header p,
#header > header p {
	color: var(--tsg-text-muted);
	font-style: normal;
}

#header a {
	color: var(--tsg-blue);
	border-bottom-color: transparent;
}

#header a:hover {
	color: var(--tsg-wood) !important;
}

#header > header .site-logo {
	display: block;
	margin: 0 auto 1.5em auto;
	max-width: 11.5em;
	border: 0;
}

#header > header .site-logo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.65em;
}

#header > footer .icons li a {
	color: var(--tsg-blue);
}

#header > footer .icons li a:hover {
	color: var(--tsg-wood) !important;
}

#header > nav ul li {
	border-top-color: var(--tsg-nav-border);
}

#header > nav ul li a {
	color: var(--tsg-blue) !important;
}

#header > nav ul li a:hover {
	color: var(--tsg-wood) !important;
}

#header > nav ul li a.active {
	background: var(--tsg-surface);
	color: var(--tsg-blue) !important;
	box-shadow: 0 1px 0 var(--tsg-nav-border);
}

/* Hauptbereich */

#wrapper {
	background: var(--tsg-surface);
}

#main > section {
	border-top-color: var(--tsg-border);
}

/* Willkommen: helle, neutrale Fläche */
#main > section#one {
	background-color: #ffffff;
}

#main > section#one > .container {
	background: transparent;
	padding-left: 2em;
	padding-right: 2em;
}

#main > section#one > .container p {
	text-wrap: pretty;
}

#main > section#one .welcome-closing {
	white-space: nowrap;
}

#main header.major h2 {
	color: var(--tsg-blue);
}

/* Banner-Slider */
#bannerSlider {
	opacity: 1;
	transition: opacity 650ms ease;
}

#bannerSlider.is-fading {
	opacity: 0;
}

/* Speisekarte */
#main > section#two {
	background-color: var(--tsg-cream);
}

#main > section#two > .container {
	background: transparent;
	padding-left: 2em;
	padding-right: 2em;
}

#main > section#two h3 {
	color: var(--tsg-blue);
}

.pdf-viewer {
	background: #fff;
	border: solid 1px var(--tsg-border);
	border-radius: 0.35em;
	box-shadow: 0 0.15em 0.75em rgba(61, 56, 50, 0.08);
	margin-top: 1.5em;
	overflow: hidden;
}

.pdf-viewer__embed {
	border: 0;
	display: block;
	height: 70vh;
	min-height: 28em;
	width: 100%;
}

.speisekarte-intro-mobile {
	display: none;
}

.pdf-fallback {
	font-size: 0.85em;
	margin: 0;
	padding: 0.75em 1em;
	text-align: center;
}

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

	.pdf-viewer__embed {
		height: 55vh;
		min-height: 20em;
	}

}

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

	#main > section#two {
		border-bottom: 0;
	}

	#main > section#two > .container {
		padding: 2em 1.25em 2.25em;
	}

	#main > section#four {
		border-top: 0;
	}

	#main > section#four > .container {
		padding: 2.25em 1.25em 2em;
	}

	.speisekarte-intro-desktop {
		display: none;
	}

	.speisekarte-intro-mobile {
		display: block;
		margin-bottom: 1.25em;
	}

	.pdf-viewer {
		display: none;
	}

	#main > section#two ul.actions-speisekarte {
		display: flex;
		flex-direction: column;
		margin: 0;
		margin-left: 0;
		width: 100%;
	}

	#main > section#two ul.actions-speisekarte li {
		margin-left: 0;
		max-width: 100%;
		padding: 0.5em 0 0 0;
		width: 100%;
	}

	#main > section#two ul.actions-speisekarte li:first-child {
		padding-top: 0;
	}

	#main > section#two ul.actions-speisekarte li:last-child {
		padding-bottom: 0;
	}

	#main > section#two ul.actions-speisekarte li .button {
		text-align: center;
		white-space: normal;
		width: 100%;
	}

}

/* Kontakt: helle Fläche (Abwechslung zur Speisekarte) */
#main > section#four {
	background-color: #ffffff;
}

#main > section#four > .container {
	background: transparent;
	padding-left: 2em;
	padding-right: 2em;
}

/* Öffnungszeiten: Creme (Abwechslung zu Kontakt) */
#main > section#five {
	background-color: var(--tsg-cream);
}

#main > section#five > .container {
	background: transparent;
}

#main > section#four h3,
#main > section#five h3 {
	color: var(--tsg-blue);
}

#main > section#five .opening-hours-note {
	color: var(--tsg-text-muted);
	font-size: 0.82em;
	font-style: italic;
	line-height: 1.45;
	margin: 0.35em 0 0;
	opacity: 0.78;
	text-align: left;
}

#main > section#five .opening-hours-note .emoji {
	font-style: normal;
}

/* Dezente Infobox (z. B. Öffnungszeiten/Hinweise) */
.info-box {
	background: rgba(255, 255, 255, 0.6);
	border: solid 1px var(--tsg-border);
	border-radius: 0.35em;
	color: var(--tsg-text);
	line-height: 1.55;
	margin: 1em 0 0.75em;
	padding: 0.85em 1em;
}

.info-box strong {
	color: var(--tsg-blue);
}

.info-box--hours {
	box-shadow: 0 0.15em 0.65em rgba(61, 56, 50, 0.06);
}

.info-box--sidebar {
	font-size: 0.85em;
	margin: 1em 1.25em 0;
}

#header .info-box--sidebar {
	background: rgba(255, 255, 255, 0.5);
}

/* Sidebar-Nav Hinweis direkt unter einem Menüpunkt */
.nav-note {
	background: transparent;
	border-top: 0;
	padding: 0.85em 1.25em 0.15em;
}

.nav-note .nav-note__icon {
	color: var(--tsg-blue);
	display: inline-block;
	margin-right: 0.55em;
	opacity: 0.9;
	vertical-align: top;
}

.nav-note .nav-note__content {
	display: inline-block;
	max-width: calc(100% - 2em);
}

.nav-note .nav-note__title {
	color: var(--tsg-blue);
	display: block;
	font-weight: 700;
	line-height: 1.2;
}

.nav-note .nav-note__text {
	color: var(--tsg-text-muted);
	display: block;
	font-size: 0.95em;
	line-height: 1.25;
	margin-top: 0.15em;
}

.nav-note .nav-note__content {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--tsg-nav-border);
	border-left: 3px solid var(--tsg-blue);
	border-radius: 0.35em;
	padding: 0.55em 0.65em;
}

.nav-note--mobile {
	display: none;
	padding: 0;
	margin: 1em 0 0.75em;
}

.nav-note--mobile .nav-note__content {
	background: rgba(255, 255, 255, 0.7);
}

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

	/* mobil: Hinweis im Inhalt statt in der Sidebar-Nav */
	#header #nav ul li.nav-note {
		display: none;
	}

	.nav-note--mobile {
		display: block;
	}

	.nav-note--mobile .nav-note__icon {
		margin-right: 0.6em;
	}

}

/* Icons, Formulare, Buttons */

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tsg-blue);
}

ul.feature-icons li:before {
	background: var(--tsg-blue);
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: var(--tsg-blue);
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background-color: var(--tsg-blue-hover);
}

/* Tabellen (Öffnungszeiten) */

.table-wrapper table tbody tr {
	border-color: var(--tsg-border);
}

.table-wrapper table tbody tr:nth-child(2n + 1) {
	background-color: rgba(255, 255, 255, 0.5);
}

/* Footer */

#footer {
	background: var(--tsg-cream);
	color: var(--tsg-text-muted);
	border-top: solid 1px var(--tsg-border);
}

#footer .copyright li {
	border-left-color: var(--tsg-border);
}

#footer .copyright a {
	border-bottom: 0;
}

#footer .copyright li.design-credit {
	border-left: 0;
	display: block;
	font-size: 0.65em;
	line-height: 1.5;
	margin-left: 0;
	margin-top: 0.75em;
	opacity: 0.45;
	padding-left: 0;
	width: 100%;
}

#footer .copyright li.design-credit a {
	color: inherit !important;
}

#footer .copyright li.design-credit a:hover {
	opacity: 0.7;
}

/* Rechtliche Unterseiten */

.legal-page #main > section.legal-section {
	background-color: #ffffff;
	border-top: 0;
}

.legal-page #main > section.legal-section > .container {
	padding-left: 2em;
	padding-right: 2em;
}

.legal-content h3 {
	color: var(--tsg-blue);
	font-size: 1.25em;
	margin-top: 2em;
}

.legal-content h3:first-of-type {
	margin-top: 1em;
}

.legal-content ul:not(.actions) {
	list-style: disc;
	margin: 0 0 2em 0;
	padding-left: 1.5em;
}

.legal-content ul:not(.actions) li {
	padding-left: 0.5em;
}

.legal-content .legal-back {
	margin-top: 2.5em;
}

/* Mobile */

#titleBar .toggle:before {
	background: var(--tsg-blue);
}

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

	#titleBar .title {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		height: 44px;
		line-height: 1;
		overflow: hidden;
		padding: 0 4.25em 0 1em;
	}

	#titleBar .title .site-logo,
	#titleBar .title .site-logo--title {
		border: 0;
		display: block;
		line-height: 0;
		max-height: 36px;
		max-width: calc(100% - 0.5em);
	}

	#titleBar .title img,
	#titleBar .title .site-logo img {
		border-radius: 0.25em;
		display: block;
		height: auto;
		margin: 0;
		max-height: 32px;
		max-width: 100%;
		width: auto;
	}

	#header > header .site-logo {
		margin-bottom: 1em;
		max-width: 9em;
	}

}

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

	#titleBar .title img,
	#titleBar .title .site-logo img {
		max-height: 28px;
	}

	#header > header .site-logo {
		max-width: 7.5em;
	}

}