/*
 * zum-goldenen-schwan.de: Darstellung für schmale Bildschirme (Auftrag tk, 29.10.2026). Muster tabarzersv.de.
 * Die alte Seite hat feste Breiten (Kopf 1330/1170 px, Bildstreifen 1770 px, Inhalt 1000 px). Ab 1200 px gilt unverändert
 * das Original-CSS aus fileadmin/css (1:1), diese Regeln greifen nur darunter:
 * Kopfbild mittig, Funktionsmenü/Rundgang darunter, Hauptmenü per Knopf, Slider auf Bildschirmbreite,
 * Inhalt auf volle Breite, Spalten untereinander, Bilder/Karte/Formular auf Breite, Fußmenü umbrechend.
 */
.zgs-mobil {
	display: none;
}

@media (max-width: 1199px) {
	html, body {
		font-size: 15px;
	}

	/* ---------- Kopf (Hintergrundbild hg_oben.jpg mit Hopfen und Schwan, Schwan mittig) ---------- */
	#oben {
		float: none;
		position: relative;
		left: 0;
		margin: 0;
		width: 100%;
		height: auto;
		padding-top: 190px;
		background-position: center top;
	}
	#oben_inhalt {
		position: static;
		left: 0;
		margin: 0;
		width: auto;
		height: auto;
		padding: 0 10px 8px 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: border-box;
	}
	/* klickbare Fläche über dem Schwan bleibt */
	#logo {
		position: absolute;
		top: 15px;
		left: 50%;
		margin: 0 0 0 -165px;
		float: none;
		height: 170px;
		width: 329px;
	}
	#felsenkeller {
		position: static;
		margin: 0 0 6px 0;
		width: auto;
		height: auto;
		order: 1;
	}
	#funktion {
		position: static;
		margin: 0 0 0 auto;
		padding: 0;
		width: auto;
		order: 2;
	}
	#funktion ul li {
		float: none;
		display: inline-block;
		font-size: 0.85em;
	}
	#funktion ul li a,
	#funktion .curfkt {
		float: none;
		display: inline;
	}
	#rundgang {
		position: static;
		margin: 6px 0 0 0;
		padding: 0;
		width: 100%;
		font-size: 18px;
		text-align: left;
		order: 3;
	}
	.zgs-menue-knopf {
		display: block;
		order: 4;
		width: 100%;
		margin: 8px 0 0 0;
		padding: 8px 12px;
		background: #7e5b0d;
		color: #ffffff;
		font-size: 1.2em;
		text-transform: uppercase;
		cursor: pointer;
		box-sizing: border-box;
	}
	.zgs-menue-knopf::before {
		content: "\2630\00a0\00a0";
	}
	div#hmenue {
		display: none;
		position: static;
		margin: 0;
		width: 100%;
		border-bottom: 4px solid #7e5b0d;
		order: 5;
	}
	#zgs-menue-schalter:checked ~ div#hmenue {
		display: block;
	}
	div#startseite {
		display: none;
	}
	#hmenue ul#menu,
	#hmenue ul li.li-ebene1 {
		float: none;
		display: block;
	}
	#hmenue ul li.li-ebene1 a,
	#hmenue ul li.li-ebene1 a:hover,
	#hmenue ul li.li-ebene1-cur a {
		float: none;
		display: block;
		background-image: none;
		border-bottom: 1px solid #ddd0b6;
		padding: 8px 12px;
	}

	/* ---------- Bildstreifen: Reservierung, Slider (1770 x 507), Schriftzug-Banner ---------- */
	#bild {
		float: none;
		position: relative;
		margin: 0;
		min-height: 0;
	}
	div#bild_inhalt_reservierung {
		position: static;
		left: 0;
		margin: 0;
		width: auto;
		min-height: 0;
		padding: 6px 12px;
		background: #7e5b0d;
		font-size: 1.2em;
	}
	div#bild_inhalt {
		left: 0;
		margin: 0;
		width: 100%;
	}
	div#bild .tx-imagecycle-pi1 {
		width: auto !important;
	}
	div#bild ul.tx-imagecycle-pi1-images {
		position: relative;
		width: 100% !important;
		height: 0 !important;
		padding-bottom: 28.6%;
		overflow: hidden;
	}
	div#bild ul.tx-imagecycle-pi1-images li {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: auto !important;
	}
	div#bild img {
		width: 100% !important;
		height: auto !important;
	}
	.tx-imagecycle-pi1-pager {
		display: none;
	}
	/* Schriftzug „Zum Goldenen Schwan“ (logo.png) unten über dem Bild, mitskaliert */
	div#bild_inhalt_logo {
		left: 0;
		top: auto;
		bottom: 15px;
		margin: 0;
		width: 85%;
		min-height: 0;
		height: 8.5vw;
		background-size: contain;
		background-position: left bottom;
	}

	/* ---------- Inhalt ---------- */
	#hgbody_ss {
		float: none;
		margin-top: 0;
		min-height: 0;
	}
	#hgbody_ss_inhalt {
		float: none;
		left: 0;
		margin: 0;
		width: auto;
	}
	#hgbody_ss_inhalt h2 {
		margin: 15px 10px 0;
		font-size: 1.3em;
	}
	#mitte {
		float: none;
		width: auto;
		margin: 0 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	#mitte .beideSpalten .linkeSpalte,
	#mitte .beideSpalten .rechteSpalte,
	.subcolumns .c50l,
	.subcolumns .c50r,
	.subcolumns .c33l,
	.subcolumns .c33r,
	.subcolumns .c40l,
	.subcolumns .c60r {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.subcolumns .subcl,
	.subcolumns .subc,
	.subcolumns .subcr {
		padding: 0 !important;
		margin: 0 !important;
	}
	#mitte img {
		max-width: 100%;
		height: auto;
	}
	#mitte .csc-textpic-intext-right .csc-textpic-imagewrap,
	#mitte .csc-textpic-intext-left .csc-textpic-imagewrap {
		max-width: 45%;
	}
	#mitte .csc-textpic-imagewrap,
	#mitte .csc-textpic-imagerow,
	#mitte .csc-textpic-center-outer,
	#mitte .csc-textpic-center-inner {
		max-width: 100%;
	}
	#mitte .csc-textpic-center .csc-textpic-center-outer,
	#mitte .csc-textpic-center .csc-textpic-center-inner {
		float: none;
		right: 0;
	}
	/* Galerien (3 Bilder je Reihe): Spalten verkleinern statt überlaufen */
	#mitte .csc-textpic-imagecolumn {
		max-width: 31%;
		box-sizing: border-box;
	}
	#mitte .csc-textpic-imagecolumn:only-child {
		max-width: 100%;
	}
	#mitte table,
	#mitte iframe {
		max-width: 100%;
	}
	blockquote {
		font-size: 1.1em;
	}
	div#druck {
		margin: 10px 0 5px;
	}

	/* Formulare (powermail-Markup): Beschriftung über dem Feld, Feld auf Breite.
	   !important, weil fileadmin/css/powermail.css auf Kontakt/Reservierung erst danach geladen wird */
	.tx-powermail .powermail_fieldset .powermail_field,
	.tx-powermail .powermail_fieldset .powermail_check_outer {
		float: none !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.tx-powermail .powermail_fieldset .powermail_label {
		float: none !important;
		width: auto !important;
		display: block;
	}

	/* ---------- Fuß ---------- */
	#copy {
		float: none;
		margin: 10px;
	}
	#hbmenue {
		float: none;
		min-height: 0;
	}
	#hbmenue_inhalt {
		left: 0;
		margin: 5px 0 0 0;
		width: auto;
		height: auto;
		padding: 10px;
		background-size: auto 100%;
		overflow: hidden;
	}
	#bmenu {
		left: 0;
		margin: 0;
		width: auto;
	}
	#hbmenue ul li.li-ebene1 {
		float: none;
		display: inline-block;
	}
	#hbmenue ul li.li-ebene1 a {
		float: none;
		padding: 4px 10px;
	}
	#design {
		float: none;
		width: auto;
		margin: 10px 0 0 0;
		text-align: center;
	}
}