/*
 * Responsive Darstellung für Tablets und Smartphones.
 * Ab 940px Breite gilt unverändert das Original-Layout aus style.css –
 * alle Regeln hier greifen nur darunter (bis auf das Ausblenden des Menü-Buttons).
 */

.nav-toggle
{
	display: none;
}

/* ---------- Tablet und kleiner ---------- */
@media (max-width: 939px)
{
	HTML
	{
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
	BODY
	{
		background-size: auto 100vh;
	}
	#site
	{
		width: auto;
		max-width: 908px;
		margin: 0 16px;
	}
	#page
	{
		background: #fff;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
		margin: 24px 0;
	}

	/* Kopf mit Logo und Menü-Button */
	#head
	{
		background: none;
		height: auto;
		padding: 24px 0 0;
	}
	H1#logo
	{
		background-position: center top;
		width: 240px;
		height: 126px;
	}
	#grenze
	{
		display: none;
	}
	.nav-toggle
	{
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 16px auto 0;
		padding: 10px 18px;
		background: #fff;
		border: 1px solid #7f1923;
		border-radius: 4px;
		color: #7f1923;
		font: bold 15px Arial, Verdana, Sans-Serif;
		cursor: pointer;
	}
	.nav-toggle-icon,
	.nav-toggle-icon::before,
	.nav-toggle-icon::after
	{
		display: block;
		width: 20px;
		height: 2px;
		background: #7f1923;
		position: relative;
		transition: transform 0.2s, background-color 0.2s;
	}
	.nav-toggle-icon::before,
	.nav-toggle-icon::after
	{
		content: "";
		position: absolute;
		left: 0;
	}
	.nav-toggle-icon::before
	{
		top: -6px;
	}
	.nav-toggle-icon::after
	{
		top: 6px;
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle-icon
	{
		background-color: transparent;
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before
	{
		transform: translateY(6px) rotate(45deg);
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after
	{
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Aufklappbare Navigation (IDs, damit die Hover-Grafiken aus style.css sicher überschrieben werden) */
	#hauptnav
	{
		display: none;
		width: auto;
		top: 0;
		margin: 16px 0 0;
		border-top: 1px solid #e6dccb;
	}
	#hauptnav.offen
	{
		display: block;
	}
	#hauptnav LI
	{
		float: none;
		border-bottom: 1px solid #e6dccb;
	}
	#hauptnav LI A,
	#hauptnav LI A:hover
	{
		background: none;
		padding: 13px 20px;
		font-size: 15px;
	}
	#hauptnav LI A:hover
	{
		background: #f7f1e8;
	}
	#hauptnav LI.cur > A
	{
		background: #7f1923;
		color: #fff;
	}
	#hauptnav UL
	{
		position: static;
		border-top: 1px solid #e6dccb;
	}
	#hauptnav UL LI:last-child
	{
		border-bottom: 0;
	}
	#hauptnav UL LI A
	{
		padding-left: 40px;
	}

	/* Eine Spalte: Sprungmenü der rechten Spalte vor den Inhalt, Badges & Co. danach */
	#allcont
	{
		background: none;
		display: flex;
		flex-direction: column;
		padding: 32px 0 16px;
	}
	#allcont > .clearL
	{
		display: none;
	}
	#cont,
	.seite-partner #cont
	{
		display: block;
		float: none;
		width: auto;
		padding: 0 32px;
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	#right,
	#cright
	{
		display: contents;
	}
	#cright > .item
	{
		order: 2;
		padding: 0 32px;
		text-align: center;
	}
	#cright > .item:has(.listmenu)
	{
		order: -1;
		text-align: left;
		margin: 0 32px 24px;
		padding: 0 0 16px;
		border-bottom: 1px solid #e6dccb;
	}
	#right H2
	{
		margin: 0;
	}
	#cright > .item
	{
		font-size: 14px;
	}
	#right UL LI
	{
		padding: 7px 0;
	}
	#cont IMG,
	#right IMG
	{
		max-width: 100%;
		height: auto;
	}

	/* Badges nebeneinander statt untereinander */
	#right .csc-textpic-imagewrap
	{
		width: auto !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 24px;
	}
	#right .csc-textpic-imagerow,
	#right .csc-textpic-image
	{
		width: auto !important;
		flex: 0 0 auto;
	}
	#right .csc-textpic-image DD
	{
		max-width: 120px;
		margin: 0 auto;
	}

	/* Fuß: Zeilen untereinander und zentriert */
	#foot
	{
		background: none;
		height: auto;
		padding: 24px 16px 32px;
		text-align: center;
		line-height: 1.8;
	}
	#foot DIV
	{
		display: block;
	}
	#copy
	{
		margin: 0;
	}
	#foot DIV#footnote
	{
		padding: 0;
	}
}

/* ---------- Smartphone ---------- */
@media (max-width: 639px)
{
	BODY
	{
		font-size: 15px;
		line-height: 1.45;
	}
	#site
	{
		margin: 0;
	}
	#page
	{
		margin: 0;
		box-shadow: none;
	}

	#allcont
	{
		padding-top: 24px;
	}
	#foot
	{
		font-size: 13px;
	}
	#cont,
	.seite-partner #cont,
	#cright > .item
	{
		padding: 0 16px;
	}
	#cright > .item:has(.listmenu)
	{
		margin: 0 16px 24px;
		padding: 0 0 16px;
	}
	#right .csc-textpic-imagewrap
	{
		gap: 0 16px;
	}
	#right .csc-textpic-imagewrap IMG
	{
		width: 90px;
	}

	/* Bilder neben dem Text: auf dem Handy über dem Text */
	#cont .csc-textpic-intext-right .csc-textpic-imagewrap
	{
		float: none;
		margin: 15px 0 0;
	}
	#cont .csc-textpic-intext-right .csc-textpic-imagewrap UL
	{
		padding: 0;
		margin: 0;
	}
	#cont .csc-textpic-intext-right .csc-textpic-imagewrap LI
	{
		padding: 0 8px 0 0;
	}

	/* Partnerlogos: zwei pro Zeile */
	.seite-partner #cont TABLE,
	.seite-partner #cont TBODY
	{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.seite-partner #cont TR
	{
		display: contents;
	}
	.seite-partner #cont TD
	{
		flex: 0 0 50%;
		box-sizing: border-box;
		padding: 10px;
		text-align: center;
	}
	.seite-partner #cont TD P
	{
		margin: 0;
	}
	#cont .tabelle-zweispaltig TABLE TR TD
	{
		display: block;
		width: auto;
	}
}

/* Harte Zeilenumbrüche im Fließtext, die nur zur Desktop-Spaltenbreite passen */
@media (max-width: 939px)
{
	BR.nur-desktop
	{
		display: none;
	}
}