/*
 * Eigene Ergänzungen zum ursprünglichen Seitenlayout (style.css):
 * 1. kleine Zusatzklassen, 2. Bildergalerien (flexibel statt feste Breiten), 3. Anpassung für Tablet und Smartphone.
 * Das ursprüngliche Layout bleibt oberhalb von 1000 px Breite unverändert.
 */

/* ---------- 1. Zusatzklassen ---------- */
.margin-top {
	margin-top: 20px;
}
.table-full {
	width: 100%;
}
.contenttable th.col-wide {
	width: 300px;
}
img {
	max-width: 100%;
	height: auto;
}

/* Schaltfläche "360° Rundgang" auf der Startseite */
.wagnerhof-button-wrapper {
	text-align: center;
	margin: 30px 0;
}
.wagnerhof-button {
	display: inline-block;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff !important;
	text-decoration: none;
	background: linear-gradient(135deg, #b7c64a, #a8b63b);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(168, 182, 59, 0.35);
	transition: all 0.3s ease;
}
.wagnerhof-button:hover {
	background: linear-gradient(135deg, #c4d452, #b7c64a);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(168, 182, 59, 0.45);
}
.wagnerhof-button:active {
	transform: translateY(0);
}

/* Schaltfläche, die wie ein Link aussieht (z. B. "Cookie-Einstellungen" im Footer) */
.link-button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #4E6840;
	text-decoration: underline;
	cursor: pointer;
}
.link-button:hover,
.link-button:focus {
	color: #F00;
}

/* Tastaturfokus sichtbar machen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #33542C;
	outline-offset: 2px;
}

/* ---------- 2. Bildergalerien (ohne feste Inline-Breiten) ---------- */
.csc-textpic-imagewrap ul {
	display: flex;
	flex-wrap: wrap;
}
.csc-textpic-center .csc-textpic-imagewrap ul {
	justify-content: center;
}
.csc-textpic-imagewrap ul li {
	float: none;
}
.csc-textpic-caption {
	text-align: center;
}

/* ---------- 3. Menü-Schaltfläche (nur mobil sichtbar) ---------- */
.menu-toggle {
	display: none;
}

/* ---------- 4. Tablet und Smartphone ---------- */
@media (max-width: 1000px) {
	#main {
		width: auto;
		max-width: 990px;
	}
	#main #header {
		float: none;
		width: auto;
		height: auto;
	}
	#main #header #logo {
		position: static;
		float: none;
		width: auto;
		height: auto;
	}
	#main #header #logo img {
		display: block;
		width: 100%;
		height: auto;
	}
	#main #header #topmenu {
		top: 1.5%;
		right: 1.5%;
		width: auto;
		height: auto;
		font-size: 0.85em;
	}
	#main #header #logobilder {
		top: 1.5%;
		left: 1.5%;
		width: 27%;
		height: auto;
		display: flex;
		gap: 2%;
	}
	#main #header #logobilder img {
		width: 48%;
		height: auto;
	}

	/* Menü */
	#main #menu {
		float: none;
		width: auto;
		height: auto;
		padding: 8px 2%;
		background: #EBF176;
		border-radius: 10px 10px 0 0;
	}
	.menu-toggle {
		display: block;
		width: 100%;
		padding: 10px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 1.3em;
		font-weight: bold;
		color: #33542C;
		text-align: left;
		cursor: pointer;
	}
	.menu-toggle::after {
		content: " \25BE";
	}
	.js #menu .mainnav {
		display: none;
	}
	.js #menu.menu-open .mainnav {
		display: block;
	}
	.mainnav,
	.mainnav ul {
		display: block;
		margin: 0;
	}
	.mainnav li {
		float: none;
		display: block;
	}
	.mainnav li a {
		float: none;
		line-height: 2.2;
		padding: 0 10px;
	}
	.mainnav li ul,
	.mainnav li:hover ul {
		position: static;
		display: block;
		width: auto;
		padding-left: 20px;
	}
	.mainnav li ul li a {
		width: auto;
		line-height: 2;
		background: none;
	}

	/* Inhalt, Seitenleiste, Footer */
	#main #inhalt {
		float: none;
		width: auto;
		padding: 10px 2%;
		background: #FEFFAF;
	}
	#main #inhalt #content {
		float: left;
		width: 68%;
		padding: 0;
	}
	#main #inhalt #rechts {
		float: right;
		width: 28%;
		padding-left: 0;
	}
	#main #inhalt #rechts .box,
	#main #inhalt #rechts .box.wetter {
		float: none;
		width: auto;
		padding: 0 0 20px;
	}
	#main #inhalt #rechts .box fieldset {
		width: auto;
		box-sizing: border-box;
	}
	#schnell-email,
	input#schnell-email {
		width: 100%;
		box-sizing: border-box;
	}
	#main #footer {
		float: none;
		clear: both;
		width: auto;
		padding: 10px 2% 20px;
		background: #FEFFAF;
	}
}

@media (max-width: 700px) {
	#main #header {
		display: flex;
		flex-direction: column;
	}
	#main #header #logo {
		order: 1;
	}
	#main #header #topmenu {
		order: 2;
		position: static;
		padding: 6px 2%;
		background: rgba(255, 255, 255, 0.85);
		font-size: 0.95em;
	}
	.topnav li {
		float: none;
		display: inline-block;
	}
	.topnav li a {
		float: none;
		display: inline;
	}
	#main #inhalt #content,
	#main #inhalt #rechts {
		float: none;
		width: auto;
	}
	#main #inhalt #rechts {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 20px;
		clear: both;
	}
	#main #inhalt #rechts .box {
		max-width: 100%;
	}
	#main #inhalt #rechts .box.wetter {
		width: 190px;
	}

	/* Bilder untereinander statt umflossen */
	.csc-textpic-imagewrap {
		float: none !important;
		margin: 0 0 10px !important;
	}
	.csc-textpic-intext-right .csc-textpic-imagewrap,
	.csc-textpic-intext-left .csc-textpic-imagewrap {
		text-align: center;
	}
	.csc-textpic-left .csc-textpic-imagewrap ul {
		justify-content: center;
	}
	.csc-textpic-text .contenttable td {
		display: inline-block;
		padding: 3px;
	}
	table.contenttable[width] {
		width: 100%;
	}

	/* Footer untereinander */
	#footer table,
	#footer tbody,
	#footer tr,
	#footer td {
		display: block;
		width: auto;
		text-align: left;
	}
	#footer td:empty,
	#footer td[width="12"] {
		display: none;
	}
	h1 {
		font-size: 1.6em;
	}
}