/* Design "Helles Creme": überschreibt die dunkle Vorlage aus main.css.
   Reihenfolge im <head>: main.css, a11y.css, design.css */

body { background: #f7f0e5; }

body,
input,
select,
textarea {
	color: #43362d;
	font-weight: 400;
	line-height: 1.7em;
}

h1, h2, h3, h4, h5, h6 {
	color: #2a1d15;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: 0;
}

strong, b { color: #2a1d15; }

a { color: #8c4122; }
a:hover { color: #2a1d15 !important; }

header.major p,
header p { color: #5a4a3e; }

/* Kopfbereich bleibt terrakotta mit weißer Schrift */
#header { background: rgba(150, 74, 40, 0.98); }
#header,
#header h1,
#header a,
#header nav ul li a { color: #ffffff; }
#header nav ul li a:hover { color: #ffffff !important; text-decoration: underline; }

#header nav ul li a.cta {
	display: inline-block;
	background: #fff3e3;
	color: #7c3a1d;
	border-radius: 4px;
	font-weight: 700;
	line-height: 2.2em;
	padding: 0 1.1em;
	margin-left: 0.6em;
}
#header nav ul li a.cta:hover { background: #ffffff; color: #5e2a14 !important; text-decoration: none; }

/* Fußbereich */
#footer { background: #ebdfcd; }
#footer h3 { color: #2a1d15; }
#footer .copyright,
#footer .copyright li,
#footer .copyright a,
#footer .copyright li a { color: #5a4a3e; }

/* Abschnitte der Startseite */
.spotlight .content {
	background: #faf4ea;
	border-color: #9a4a28;
}
.spotlight .content p,
.spotlight .content header p { color: #43362d; }

header.major:after { background: #9a4a28; }

/* Bilder */
.image img { box-shadow: 0 2px 10px rgba(60, 40, 20, 0.18); }
.spotlight .image.main img,
#banner .content .image img { box-shadow: none; }

/* Tabellen */
table tbody tr:nth-child(2n + 1) { background-color: rgba(150, 74, 40, 0.08); }
table thead { border-bottom-color: rgba(67, 54, 45, 0.4); }
table td, table th { border-color: rgba(67, 54, 45, 0.15); color: #43362d; }
table th { color: #2a1d15; }

/* Formulare */
label { color: #2a1d15; font-weight: 400; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
	background: #fffaf1;
	border-color: #b9a287;
	color: #43362d;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: #9a4a28;
	box-shadow: 0 0 0 1px #9a4a28;
}
::placeholder { color: rgba(67, 54, 45, 0.78) !important; }
select {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%2343362d' /%3E%3C/svg%3E");
}
input[type="checkbox"] + label { color: #43362d; }
input[type="checkbox"] + label:before {
	background: #fffaf1;
	border-color: #b9a287;
	color: #9a4a28;
}
input[type="checkbox"]:checked + label:before { background: #fffaf1; border-color: #9a4a28; color: #9a4a28; }

/* Knöpfe */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	box-shadow: inset 0 0 0 1px rgba(67, 54, 45, 0.5);
	color: #2a1d15 !important;
}
.button:hover,
input[type="submit"]:hover { background-color: rgba(150, 74, 40, 0.1); }
.button.special,
input[type="submit"].special {
	background-color: #964a28;
	box-shadow: none;
	color: #ffffff !important;
}
.button.special:hover,
input[type="submit"].special:hover { background-color: #7c3a1d; }

/* Meldungen */
#error { background: #f9e3df; border-color: #a03020; }
#error, #error p, #error li { color: #5a1a12; }
#success { background: #e3f0df; border-color: #3c7a34; }
#success, #success p, #success li { color: #1f4a1a; }

/* Tastaturfokus: dunkel auf hellem Grund, weiß auf dem terrakottafarbenen Kopf */
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible { outline: 2px solid #2a1d15 !important; outline-offset: 3px; }
#header a:focus-visible,
#titleBar .toggle:focus-visible,
#navPanel a:focus-visible { outline-color: #ffffff !important; }

/* Infoleiste unter dem Kopf */
.infoleiste {
	background: #ebdfcd;
	border-bottom: 1px solid rgba(67, 54, 45, 0.15);
	color: #43362d;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.6em;
	justify-content: center;
	align-items: center;
	font-size: 0.82em;
	line-height: 1.5em;
	padding: 0.6em 1em;
	text-align: center;
}
.infoleiste a { color: #2a1d15; font-weight: 700; }
.infoleiste .punkt {
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	margin-right: 0.5em;
	background: #8a7d70;
}
.infoleiste .punkt.offen { background: #3f8f3f; }
.infoleiste .punkt.gleich { background: #c98a1b; }
/* Startseite: Kopf im normalen Fluss (sonst läge er über der Infoleiste) */
body.landing #header { position: relative; }

/* Handy: Titelleiste und Menü */
@media screen and (max-width: 736px) {
	.infoleiste { font-size: 0.74em; }
	#titleBar { background: #964a28; }
	#titleBar .toggle:before { background: #7c3a1d; color: #ffffff; }
	#navPanel { background: #3a2a20; }
	#navPanel .link,
	#navPanel .link.depth-0 { color: #ffffff; }
	#navPanel .link.cta,
	#navPanel .link[href*="reservation"] { font-weight: 700; color: #fff3e3; }
}