/*
 * tabarzersv.de: Darstellung für schmale Bildschirme (Wunsch tk, 27.10.2026). Muster via-solutions.de.
 * Die alte Seite hat feste Breiten (Kopf 1000 px fixiert, Bildstreifen 1600 px, Inhalt 1170 px). Ab 1200 px gilt unverändert
 * das Original-CSS aus fileadmin/css (1:1), diese Regeln greifen nur darunter:
 * Kopf nicht fixiert, Hauptmenü per Knopf, Slider auf Bildschirmbreite, Spalten untereinander, Bilder/Tabellen/Formular auf Breite.
 */
.tsv-mobil {
	display: none;
}

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

	/* ---------- Kopf ---------- */
	#oben_hintergrund {
		position: relative;
		left: 0;
		margin: 0;
		width: auto;
		height: auto;
		background-size: auto 100%;
		overflow: hidden;
	}
	#oben {
		position: static;
		margin: 0;
		width: auto;
		height: auto;
		padding: 0 10px 8px 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	#logo {
		float: none;
		width: 110px;
		height: auto;
		order: 1;
	}
	#logo img {
		width: 110px;
		height: auto;
		display: block;
	}
	#suche {
		float: none;
		position: relative;
		margin: 10px 0 0 auto;
		order: 2;
	}
	#startseite,
	#datum {
		display: none;
	}
	#funktion {
		position: static;
		margin: 6px 0 0 0;
		width: 100%;
		height: auto;
		order: 3;
		font-size: 0.9em;
	}
	#funktion ul {
		float: none;
	}
	#funktion ul li {
		display: inline-block;
	}
	.tsv-menue-knopf {
		display: block;
		order: 4;
		width: 100%;
		margin: 8px 0 0 0;
		padding: 8px 12px;
		background: #213e02;
		color: #ffffff;
		font-size: 1.2em;
		cursor: pointer;
		box-sizing: border-box;
	}
	.tsv-menue-knopf::before {
		content: "\2630\00a0\00a0";
	}
	div#hmenue {
		display: none;
		position: static;
		margin: 0;
		width: 100%;
		order: 5;
	}
	#tsv-menue-schalter:checked ~ div#hmenue {
		display: block;
	}
	#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 #c1c1c0;
		padding: 8px 12px;
		font-size: 1.3em;
	}
	#hmenue li ul.ul-ebene2 {
		position: static;
		visibility: visible !important;
		width: auto;
		border: 0;
		background: #f2f4ea;
	}
	#hmenue #menu li ul li.li-ebene2 a,
	#hmenue #menu li ul li.li-ebene2 a:hover {
		float: none;
		width: auto;
		padding: 6px 12px 6px 30px;
		font-size: 1.1em;
	}

	/* ---------- Bildstreifen mit Kopf-Slider (Bilder 1600 x 925) ---------- */
	div#bild {
		position: relative;
		left: 0;
		margin: 0;
		width: 100%;
		min-height: 0;
	}
	div#bild .tx-imagecycle-pi1 {
		width: auto !important;
	}
	div#bild ul.tx-imagecycle-pi1-images {
		width: 100% !important;
		height: 0 !important;
		padding-bottom: 57.8%;
		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 ul.tx-imagecycle-pi1-images img {
		width: 100% !important;
		height: auto !important;
	}
	.tx-imagecycle-pi1-images .imagecycle-caption {
		bottom: 0;
		left: 0;
		margin: 0;
		width: 100%;
		white-space: normal;
	}
	.test {
		width: auto;
		padding: 4px 10px;
	}
	.zeile1 {
		display: none;
	}
	.zeile2 {
		font-size: 1.4em;
	}
	.tx-imagecycle-pi1-pager {
		display: none;
	}
	div#bild_login {
		position: static;
		margin: 0;
		width: auto;
		padding: 20px 10px;
		font-size: 1.6em;
	}

	/* ---------- Inhalt ---------- */
	#hgbody,
	#hgbody_login {
		float: none;
		left: 0;
		margin: 0;
		width: auto;
		min-height: 0;
	}
	#inhalt {
		left: 0;
		margin: 0;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
	}
	#links,
	#mitte {
		float: none;
		width: auto;
		padding: 10px 10px 0 10px;
		margin: 0;
		box-sizing: border-box;
	}
	/* Startseite: zuerst Willkommenstext, dann "Aktuelles" */
	#seite1 #mitte {
		order: 1;
	}
	#seite1 #links {
		order: 2;
	}
	#mitte .beideSpalten .linkeSpalte,
	#mitte .beideSpalten .rechteSpalte,
	.subcolumns .c50l,
	.subcolumns .c50r,
	.subcolumns .c33l,
	.subcolumns .c33r {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}
	.subcolumns .subcl,
	.subcolumns .subc,
	.subcolumns .subcr {
		padding: 0 !important;
		margin: 0 !important;
	}
	#mitte img,
	#links 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;
	}
	#mitte .csc-textpic-imagecolumn {
		max-width: 100%;
	}
	#mitte table {
		max-width: 100%;
	}
	#mitte iframe {
		max-width: 100%;
	}
	div#druck {
		margin: 10px 0 5px;
	}

	/* Kontaktformular (powermail-Markup): Beschriftung über dem Feld, Feld auf Breite.
	   !important, weil fileadmin/css/powermail.css auf der Kontaktseite erst danach geladen wird */
	.tx-powermail .powermail_fieldset .powermail_field {
		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,
	#design {
		float: none;
		left: 0;
		margin: 0;
		width: auto;
		height: auto;
		padding: 8px 10px;
		text-align: left;
	}
	#design {
		background: #283500;
	}
}