/* @font-face
{
	font-family:'Open Sans';
	font-weight: 125 950;
	src: url('OpenSans-VariableFont_wdthwght.ttf') format('truetype');
} */
:root {
	--breite_layout: 100vw;
	--hellgrau: #f8f8f8;
	--grau: #e9e9e9;
	--font-size: 16px;
	--Hintergrund: var(--Dunkler);
	cursor: default;
	-moz-tab-size: 4;
	tab-size: 4;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: var(--font-size);
}
*, ::before, ::after
{
	line-height: 1.5;
	box-sizing: border-box;
	position: relative;
	font-family: arial, tahoma, helvetica; /*'Open Sans', */
	letter-spacing: .6px;
	background-repeat: no-repeat;
}
body
{
	display: grid;
	grid-template-columns: 1fr var(--breite_layout) 1fr;
	margin: 0;
	overflow-x: hidden;
	min-height: 100vh;
}
script {display: none !important;}
body.Hintergrund {grid-template-columns: 1fr auto 1fr;}
body > * {padding: var(--AbstandHalb);}
header
, main
, footer
, nav
{
	grid-column: 1 / 4;
}
main
, footer
, article.Artikel
, .Liste
, .Albumvorschau
, .ArtikelContainer
, main > .Programm
, .InternetauftrittEditor #content
, main:not(Homepage) > section
{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: start;
	grid-auto-flow: row;
	gap: var(--Abstand);
}
.Liste.Flex.Spalte
{
	display: flex;
	align-items: normal;
}
#header, main:not(.Programmbereich main), #footer {max-width: var(--breite_layout);}
footer
{
	padding: 0 var(--Abstand) var(--Abstand) var(--Abstand);
	justify-items: center;
	min-height: 100vh;
	align-items: center;
	min-height: 100vh !important;
	transition: .3s;
	background: #F5F5F5;
	margin-top: 25vh;
	margin-bottom: calc(var(--Abstand) * -1);
}
#footer
{
	grid-column: span 12;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--Abstand);
}
footer img
{
	background: white;
    padding: var(--Abstand);
    border-radius: var(--Radius);
}
section
{
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	grid-column: span 12;
}
section > * 				{grid-column: span 12;}
section.Programmbereich 	{flex-direction: column;}
section.Ort .Thumbnail img 	{border-radius: var(--Radius);}
section.Programmbereich h1 	{flex-basis: 100%;}
address 					{text-decoration: none;}
ol
, .Tageszeiten
, .Wochentage
, .WarenkorbAnmeldung
, .Liste
{
	flex: 1;
}
ol
, ul
, fieldset
, .box
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
header {background: white; z-index: 30;}
#header
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--Abstand);
}
#LogoUndText
{
	display: flex;
	gap: var(--Abstand);
	flex: 1;
}
#header_logo img, #header_logo_darkmode img  	{max-width: 30vw;}
header nav svg 									{width: 32px;}
header nav a
, header nav a:link
, header nav a:active
, header nav a:visited
{
	display: flex;
	align-items: center;
	gap: var(--AbstandHalb);
	padding: var(--AbstandHalb);
	background: var(--Hintergrund);
	border-radius: 5px;
}
header nav 	{grid-column: 1/3;}
nav ul
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--Abstand);
}
nav li {flex: 1;}
nav a::before
{
	content: '';
	position: absolute;
	height: 1px;
	bottom: 1px;
	left: 0;
	right: 0;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .3s ease-in-out;
	bottom: var(--AbstandHalb);
	left: var(--AbstandHalb);
	right: var(--AbstandHalb);
	background-color: black;
}
#header_navi {grid-column: 3;}
nav#header_navi a:hover::before
{
	transform-origin: left;
	transform: scaleX(1);
}
nav#header_navi a.eigenesBild:hover::before
{
	transform-origin: left; transform: scaleX(0);
}
header nav
, template
, #suche #erweitert li.deaktiviert
, .Homepage header .burger
, .breite_25 .Veranstaltung.Teaser > a img
, #suche #erweitert h2
{
	display: none;
}
#suche #suchformular 	{flex-basis: 100%;}
.Artikel.Link > a 		{flex: 1;}
address
{
	text-decoration: none;
	font-style: normal;
}
.Benutzer a.eigenesBild img
{
	min-width: 32px;
	min-height: 32px;
	border-radius: 50%;
	height: 32px;
}
table, input, button, select 	{font-size: var(--font-size);}
table 							{border-spacing: 1px;}
h1 a.extern
, h2 a.extern
, h3 a.extern
, h4 a.extern
, h5 a.extern
{
	outline: none;
	margin-left: 0;
}
summary
{
	display: block;
	color: var(--LinkColor);
	text-decoration: none;
}
a
, a:link
, a:active
, a:visited
{
	display: block;
	color: var(--LinkColor);
	text-decoration: none;
}
a.Teaser:not(.fensterbreit)
, .Teaser > a:not(.fensterbreit)
{
	border-radius: var(--Radius);
}
.Text a
, .Text a:link
, .Text a:active
, .Text a:visited
{
	display: inline;
	text-decoration: underline;
}
.hervorheben a
, a.hervorheben
, details.hervorheben
{
	padding: var(--Abstand);
	background: var(--Hintergrund);
	border-radius: var(--Radius);
	white-space: normal;
}
details article li:first-child h2 		{display: none;}
.Text > *:not(.Text.h1 > *
, .Text.fensterbreit > *
, .HintergrundContainer)
, .p > *
{
	max-width: var(--Lesebreite);
}
.Text > h1 	{max-width: none;}
p
{
	max-width: var(--Lesebreite);
	margin: 0;
}
p :is(a:link, a:active, a:visited)
{
	text-decoration: underline;
}
p a:hover
{
	text-decoration: none;
	outline-width: 0;
	cursor: pointer;
}
h1, h2, h3, h4, h5, h6
{
	font-size: 1rem;
	grid-column: span 12;
	padding: 0;
	margin: 0;
	text-align: left;
}
h1 					{font-size: 1.5rem;}
.Veranstaltung h1 	{text-align: left;}
hr
{
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	color: inherit;
}
abbr[title] 			{border-bottom: none; text-decoration: underline dotted;}
b, strong 				{font-weight: bold;}
code, kbd, samp, pre 	{font-family: monospace, monospace;}
small 					{font-size: 0.8rem;}
sub, sup 				{font-size: 0.75rem; line-height: 0; vertical-align: baseline;}
sub 					{bottom: -0.25em;}
sup 					{top: -0.5em;}
button
, input
, optgroup
, select
, textarea
{
	margin: 0;
	width: 100%;
}
input[type=radio] 		{width: auto;}
input[type=checkbox]
{
	width: 24px;
	height: 24px;
}
input:focus
, button:focus
, a:focus {outline-offset: 2px; outline: var(--Outline);}
input
, select
, textarea
{
	padding: var(--Abstand);
	border-radius: var(--Radius);
	border: solid 2px var(--LinkColor);
	background: white;
}
button, input
{
	padding: var(--Abstand);
	overflow: visible;
}
button, select 		{text-transform: none;}
fieldset
{
	padding: 0;
	margin: 0;
	border-width: 0;
}
legend
{
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}
progress 			{vertical-align: baseline;}
textarea
{
	overflow: auto;
	margin: 0;
	resize: vertical;
	font-size: var(--font-size)
}
[type="number"]::-webkit-inner-spin-button
, [type="number"]::-webkit-outer-spin-button
{
	height: auto;
}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::before, ::after
{
	text-decoration: inherit;
	vertical-align: inherit;
}
:is(dl, ol, ul)
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.Text ul
{
	gap: 5px;
	padding-left: var(--AbstandDoppelt);
	padding-bottom: var(--Abstand);
	list-style-type: disc;
}
.Text ol
{
	padding-left: var(--Abstand);
	padding-bottom: var(--Abstand);
	list-style-type: decimal;
}
audio
, canvas
, iframe
, img
, svg
, video
{
	vertical-align: middle;
}
iframe
{
	border-style: none;
	grid-column: span 12;
}
svg:not([fill]) 	{fill: currentColor;}
table
{
	border-collapse: collapse;
	border-color: currentColor;
	text-indent: 0;
}
::-webkit-file-upload-button
, button
, [type="button" i]
, [type="reset" i]
, [type="submit" i]
{
	-webkit-appearance: button;
}
[type="search" i] 							{-webkit-appearance: textfield; outline-offset: -2px;}
::-webkit-input-placeholder 				{color: inherit; opacity: 0.54;}
::-webkit-search-decoration 				{-webkit-appearance: none;}
details 									{display: block;}
details > summary:first-of-type 			{display: list-item;}
details ul 									{padding: 0 var(--Abstand) var(--Abstand) var(--Abstand);}
summary 									{cursor: pointer;}
summary + * 								{padding-top: var(--Abstand)}
[aria-busy="true" i] 						{cursor: progress;}
[aria-disabled="true" i], [disabled] 		{cursor: not-allowed;}
[aria-hidden="false" i][hidden] 			{display: initial;}
[aria-hidden="false" i][hidden]:not(:focus) {clip: rect(0, 0, 0, 0); position: absolute;}
figure 										{margin: 0;}
.fensterbreit > figure						{margin: auto;}
Video
{
	height: 100%;
	width: 100%;
	box-shadow: var(--Shadow);
}
.Video.vorschau.hintergrund 				{background-size: cover;}
.Video.vorschau:not(:has(.zwei-klick-meldung)) {aspect-ratio: 16/9;}
.Video.vorschau .zwei-klick-meldung
{
	flex-wrap: wrap;
	background: rgba(0,0,0,0.75);
	color: white;
	align-items: center;
	gap: 15px;
	padding: 15px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	width: 100%;
	height: 100%;
}
.Video.vorschau iframe
{
	position: absolute;
	inset: 0;
	width:100%;
}
.Video.vorschau .zwei-klick-meldung>* 		{flex-shrink: 0;}
.Video.vorschau .zwei-klick-meldung p 		{flex-shrink: 1; margin-bottom: 0;}
.Video.vorschau .zwei-klick-meldung svg 	{width: 64px;}
.Video.vorschau button 						{white-space: nowrap;}
.Video.bodyDetail							{background: var(--Hintergrund); display: grid;}
img:not(.Grafik), video
{
	max-width: 100%;
	max-height: 80vh;
	display: block;
}
img.Dokument
, img.Logo
, img.Grafik 			{border: #bbb 1px solid;}
img.big 				{margin: auto;}
figcaption
{
	background: #f5f5f5;
	padding: var(--Abstand);
	border-radius: 0 0 var(--Radius) var(--Radius);
	font-size: 0.5rem;
}
article img 			{border-radius: var(--RadiusHalb);}
article img.icon 		{border-radius: 0;}
article.inhalt h2 		{grid-column: span 12; flex-basis: 100%;}
article.inhalt 			{display: flex; flex-direction: column; gap: var(--Abstand);}
article > details
{
	transition: background .5s;
	flex: 1;
	background: var(--Hintergrund);
	backdrop-filter: var(--BackdropBlur);
	border-radius: var(--Radius);
	grid-column: span 12;
}
article > details[open]
{
	transition: background .5s ease-out;
	background: var(--Dunkler);
}
.Artikel > article 					{flex: 1;}
:not(td) > details > summary 		{padding: var(--Abstand);}
details[open] > summary
{
	font-size: 1.5rem;
	display: block;
}
details > article 					{padding: 0 var(--Abstand) var(--Abstand) var(--Abstand);}
details > article > div > .h1 		{display: none;}
article.inhalt > a:link
{
	background: var(--Hintergrund);
	border-radius: var(--Radius);
}
.Hintergrund > * 					{z-index: 20;}
.HintergrundFixed header 			{background: none;}
.HintergrundFixed header.sticks 	{background: white;}
.HintergrundContainer
{
	position: absolute;
	overflow: hidden;
	top: 0; right: 0; bottom: 0; left: 0;
	max-width: none;
	z-index: 10;
}
.HintergrundContainer > div
, .HintergrundContainer > video
{
	position: absolute;
	object-fit: cover;
	opacity: 0;
	top: 0; right: 0; bottom: 0; left: 0;
	min-width: 100%;
	min-height: 100%;
	background-repeat: no-repeat !important;
	background-size: cover;
	background-position: center;
	z-index: 5;
}
.HintergrundContainer.inaktiv
{
	transition: 3s ease;
	filter: grayscale(1);
}
.fensterbreit:not(.HintergrundFixed) .HintergrundContainer > div	{animation: 8s cinematic forwards;}
body:not(.HintergrundFixed) > .HintergrundContainer > *
{
	animation: 25s cinematic_rotate;
	animation-delay: 9s;
	animation-iteration-count: infinite;
}
.Artikel.Hintergrund:not(body)
{
	display: flex;
	gap: var(--Abstand);
	overflow: hidden;
}
.positioniert.Hintergrund:not(.fensterbreit)
, .Hintergrund.Veranstaltung:not(.fensterbreit,body)
{
	padding: var(--AbstandDoppelt);
	border-radius: var(--Radius);
	overflow: hidden;
}
.Hintergrund.Veranstaltung
{
	min-height: 500px;
	align-items: end;
}
.positioniert.Hintergrund:not(.fensterbreit) > .Inhalt
{
	border-radius: var(--RadiusHalb);
	box-shadow: var(--HintergrundShadow);
}
.startStop
{
	position: absolute;
	right: var(--Abstand);
	bottom: var(--Abstand);
	background: var(--Rauchglas);
	color: white;
	width: max-content;
	z-index: 10;
}
body > div > .startStop
{
	position: fixed;
	right: var(--Abstand);
	bottom: var(--Abstand);
}
body:not(.Display) div.HintergrundFadeIn
, body:not(.Display) video.HintergrundFadeIn
{
	transition: opacity 3s ease;
	opacity: 1;
}
.Display .HintergrundContainer > div 	{opacity: 1;}
.HintergrundFadeOut
{
	transition: opacity 3s ease;
	opacity: 0;
}
.HintergrundFixed > div > div 			{background-attachment: fixed;}
main > * 								{z-index: 20;}
main > .fensterbreit 					{z-index: 10;}
table.standard
{
	width: 100%;
	border-collapse: collapse;
	empty-cells: show;
}
table.standard th
{
	text-align: left;
	padding: 5px;
	white-space: nowrap;
	font-weight: bold;
}
table.standard td
{
	vertical-align: top;
	background: #fff;
	padding: 5px;
}
table.standard table.standard {border: 0px;}
.standard > article
{
	background: var(--Hintergrund);
	display: flex;
	flex-direction: column;
	border-radius: var(--Radius);
}
.standard > article figure:not(.Icon, .Grafik) img
{
	width: 100%;
	border-radius: var(--Radius) var(--Radius) 0 0;
}
.standard > article figure.Icon
, .standard > article figure.Grafik
{
	margin: 0 auto;
	padding: var(--Abstand) var(--Abstand) 0 var(--Abstand);
}
.breite_4 > article figure.Icon
, .breite_4 > article figure.Grafik
{
	padding: 0;
}
.breite_0 > article > figure.Icon + .ArtikelTeaserText
, .breite_0 > article > figure.Grafik + .ArtikelTeaserText
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.breite_0 > article > figure.Icon + .ArtikelTeaserText *
, .breite_0 > article > figure.Grafik + .ArtikelTeaserText *
{
	text-align: center;
}
.ArtikelTeaserText	 		{padding: var(--Abstand);}
.standard > article h2 		{font-size: 1rem;}
.fensterbreit.Hintergrund .standard > article
{
	background: none;
	padding: 0;
}
.Honorarvertraege 			{padding: var(--Abstand);}
.Brotkrumennavigation
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	grid-column: span 12;
}
.Errorbox > div 			{padding: var(--AbstandHalb);}
.Navigationspunkt
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.Person
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	background: white;
	border-radius: var(--Radius);
	padding: var(--Abstand);
}
.Veranstaltung .Text ul 	{display: block;}
.Veranstaltung.Teaser
{
	display: flex;
	gap: var(--Abstand);
	flex-basis: 100%;
	flex-direction: column;
	border-radius: var(--Radius);
	background: var(--Hintergrund);
}
.Veranstaltung .Applikationsreferenz .hauptveranstaltungen .Veranstaltung.Teaser {flex-basis: unset;}
.empfehlungen .Veranstaltung.Teaser 	{background: none;}
.Veranstaltung.Teaser .Thumbnail 		{width: 100%;}
.Veranstaltung.Teaser .Thumbnail img
{
	object-fit: cover;
	max-width: 100%;
	max-height: 28vh;
	width: 100%;
	border-radius: 15px 15px 0px 0px;
}
.Veranstaltung.Teaser :where(img.Logo, img.Grafik) 		{border-radius: 2px;}
.Veranstaltung.Teaser > a 								{display: flex; flex: 1;}
.Veranstaltung.Teaser > a:focus 						{outline-offset: -2px;}
.Veranstaltung.Teaser > a.Channel .Inhalt 				{padding: var(--Abstand);}
.Veranstaltung.Teaser:where(a:visited) 					{border: solid 3px red; }
.Veranstaltung.Teaser .Inhalt							{flex: 1;display: flex;}
.Programmheft .Veranstaltung.begonnen.Teaser 			{order: 2;}
.Programmheft .Veranstaltung.Teaser:not(.begonnen) 		{order: 1;}
.Veranstaltung.begonnen h2 								{font-weight: normal;}
.Veranstaltung.begonnen.voll 							{display: none;}
.Veranstaltung.begonnen.Teaser :is(
	.Ampelanzeige,
	.neu_teaser,
	.merkenInTeaser,
)
{
	display: none;
}
.Programmheft .Veranstaltung.beendet.Teaser 			{filter: grayscale(1); order: 3;}
.Veranstaltung.begonnen.Teaser .Titel::after 			{content: "begonnen"; color: red;}
.Veranstaltung.beendet 									{display: flex;}
.Veranstaltung.beendet .Name 							{flex: 1;}
.Veranstaltung.beendet .Inhalt 							{align-items: initial;}
.Veranstaltung.beendet.Teaser .Titel::after 			{content: "beendet";}
.WarenkorbGrid .Veranstaltung.Teaser .Inhalt 			{background: var(--HintergrundAufHintergrund);}
.breite_5 .Veranstaltung.Teaser .Inhalt
, .Veranstaltung.Teaser .Inhalt
, .Veranstaltung.Teaser .Inhalt
{
	flex-direction: column;
}
.breite_5 .VeranstaltungTeaserInhalt
, .breite_4 .VeranstaltungTeaserInhalt
, .breite_3 .VeranstaltungTeaserInhalt
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.breite_5 .Veranstaltung.Teaser .Inhalt .Titel
, .breite_4 .Veranstaltung.Teaser .Inhalt .Titel
, .breite_3 .Veranstaltung.Teaser .Inhalt .Titel
{
	margin: 0;
	display: block;
	text-align: center;
	gap: 0 var(--Abstand);
}
.breite_5 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_4 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_3 .Veranstaltung.Teaser .Inhalt .Ort
{
	justify-content: center;
	text-align: center;
}
.breite_5 .Veranstaltung.Teaser .Inhalt .Zeit
, .breite_4 .Veranstaltung.Teaser .Inhalt .Zeit
, .breite_3 .Veranstaltung.Teaser .Inhalt .Zeit
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--Abstand);
}
.Veranstaltung.Teaser .Inhalt .Titel
{
	display: flex;
	align-items: start;
	gap: var(--AbstandHalb);
	flex: 1;
	grid-column: 1/3;
}
.Veranstaltung.Teaser .Inhalt .Untertitel 		{grid-column: 1/2;}
.Veranstaltung.Teaser .Inhalt .Zeit 			{order: 3; grid-column: 1/2;}
.Veranstaltung.Teaser .Inhalt .Ort
{
	display: flex;
	order: 4;
	grid-column: 1/2;
	overflow: hidden;
}
.Veranstaltung.Teaser .Ampelanzeige img.icon
{
	height: 20px !important;
	max-width: none;
}
.Veranstaltung.Teaser .Inhalt .Ampelanzeige
{
	order: 2;
	grid-column: 2/3;
	grid-row: 2/3;
}
.Veranstaltung.Teaser .Ampeltext 				{display: none;}
.Veranstaltung.Teaser .Inhalt .Ampel .icon 		{width: 17px; height: 12px;}
.neu_teaser::before, .VeranstaltungNeu::before 	{content: "(";}
.neu_teaser::after, .VeranstaltungNeu::after 	{content: ")";}
.Album.Teaser h2 								{font-weight: bold;}
.Album.Teaser h2 								{text-align: center;}
.Kontakt.Teaser .Inhalt
{
	display: flex;
	flex-direction: column;
	background: var(--Hintergrund);
	border-radius: var(--Radius);
	flex-wrap: nowrap;
	gap: 0;
	font-weight: normal;
	font-size: 1rem;
}
.Kontakt.Teaser .KontaktText
{
	order: 2;
	flex: 1;
	padding: var(--Abstand);
}
.Kontakt.Teaser.modern
{
	overflow: hidden;
	max-width: 500px;
}
.Kontakt.Teaser.modern .Inhalt
{
	display: grid;
	grid-template-rows: auto min-content;
}
.Kontakt.Teaser.modern .KontaktTeaserBild
{
	grid-column: 1/2;
	grid-row: 1/3;
	z-index: 10;
}
.Kontakt.Teaser.modern .KontaktText
{
	background: var(--Rauchglas);
	color: white;
	padding: var(--Abstand);
	margin: var(--Abstand);
	border-radius: var(--Radius);
	grid-column: 1/2;
	grid-row: 2/3;
	z-index: 20;
}
.Kontakt.Teaser.modern .KontaktTeaserBild > picture > img
{
	width: auto;
	max-height: none;
}
.Kontakt.modern
{
	align-self: normal;
	display: flex;
	align-items: normal;
}
.KontaktTeaserBild
, .Kontakt.modern picture
{
	display: flex;
	align-items: normal;
	margin: auto;
}
.breite_1 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_2 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_3 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_4 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_5 .Veranstaltung.Teaser .Inhalt .Ort
, .breite_6 .Veranstaltung.Teaser .Inhalt .Ort
{
	grid-column: 1/2;
}
.Liste.Feedbackliste .Text img
{
	height: 15vh;
	border-radius: 10px;
	margin: auto;
}
.Liste.Feedbackliste .Text
{
	background: white;
	padding: var(--abstand);
	margin: auto;
	display: flex;
	min-height: 100%;
	flex-direction: row
}
.Liste.Feedbackliste .Text > div {flex: 1; display: grid}
.Hintergrund:not(.Abbinder, .Liste.Feedbackliste) > *:not(.Abbinder, .HintergrundContainer, .Applikationsreferenz, section, figure, a.standard, .SliderBackward, .SliderBar, .SliderForward, .SliderItem)
{
	padding: var(--Abstand);
	box-shadow: black 0 0 15px -5px;
}
.Hintergrund > figure
{
	box-shadow: var(--Shadow);
	border-radius: var(--Radius);
	overflow: hidden;
}
.Hintergrund > *:not(a, .HintergrundContainer, .Applikationsreferenz, section, footer, figure, .SliderBackward, .SliderBar, .SliderForward, .SliderItem, .Feedbackliste)
{
	background: white;
}

.Journal:not(body, .Journal.Teaser)
{
	display: flex;
	flex-direction: column;
	gap: calc(var(--Abstand) * 6);
	max-width: var(--Lesebreite);
}
.Journal.Teaser .Inhalt
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.Journaleintrag .Inhalt
{
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
}
.Journaleintrag.Detail
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	padding: calc(var(--Abstand) * 6) 0;
}
.JournalVorschau 							{border-radius: var(--Radius);}
.JournalVorschauliste .Journaleintrag img	{height: 200px;}
.Journaleintrag.Detail:first-child			{padding: 0 0 calc(var(--Abstand) * 6) 0;}
.Journaleintrag a 							{display: block;}
.Journaleintrag .Metadaten
, .JournalVorschauliste .Metadaten
{
	display: flex;
	gap: var(--Abstand);
}
.Journaleintrag img
{
	object-fit: cover;
	object-position: top;
	width: 100%;
	border-radius: var(--Radius);
	max-height: 60vh;
}
.Journaleintrag img.Logo
{
	object-fit: contain;
	max-height: 30vh;
}
.Journaleintrag img.Grafik		{max-height: 30vh;}
.JournalVorschauliste
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--Abstand);
	justify-content: space-between;
}
.JournalVorschauliste h2 		{hyphens: auto;}
a.Journaleintrag
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.JournalText
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.Hintergrund > header 			{border-radius: var(--Radius);}
body.Hintergrund
{
	gap: var(--AbstandDoppelt) 0;
	padding: 0;
}
body.Hintergrund > .HintergrundContainer > div 	{background-attachment: fixed; animation: none;}
body.up.Hintergrund .Sticky0 {position: initial;}
body.Hintergrund #barrierefreiheit_leiste
{
	background-color: var(--Rauchglas);
	backdrop-filter: blur(4px);
	width: max-content;
	border-radius: var(--Radius);
	justify-self: center;
}
body.Hintergrund #barrierefreiheit_leiste a		{color: white;}
body.Hintergrund header
{
	grid-column: 2/3;
	margin: 0 var(--Abstand);
}
body.Hintergrund header #header 				{padding-top: 0; width: auto;}
.fensterbreit
{
	margin-left: calc(var(--Abstand) / 2 * -1);
	margin-right: calc(var(--Abstand) / 2 * -1);
	box-shadow: none;
	padding: calc(var(--Abstand) * 6) calc(var(--Abstand) * 4) calc(var(--Abstand) * 6) calc(var(--Abstand) * 4);
}
body.Hintergrund .fensterbreit .startStop 		{display: none;}
.Abbinder
{
	min-height: 15rem;
	align-items: end;
	box-shadow: var(--Shadow);
	justify-content: center;
	justify-items: center;
	box-shadow: black 0 0 3px 0;
	transition: .3s;
}
.Abbinder:not(.fensterbreit)	{border-radius: var(--Radius);}
.Abbinder a 					{flex: 1;}
.Abbinder h2 					{text-align: center;}
.Abbinder .Inhalt
{
	background: white;
	flex-basis: 100%;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	padding: var(--Abstand);
}
.Abbinder .Inhalt p
, .Abbinder .Inhalt figure
{
	display: none;
}
.Abbinder_unten 				{align-items: end;}
.Abbinder_oben 					{align-items: start;}
.Abbinder_unten .Inhalt
{
	border-radius: 0 0 var(--Radius) var(--Radius);
	border-top: 2px solid #e5dede;
}

article details .Veranstaltung.Teaser .Inhalt, .Teaser.Hintergrund > .Inhalt.Abbinder_oben .Inhalt {border-radius: var(--Radius) var(--Radius) 0 0;}
#angebotStatus 				{flex: 1;}
.Angebot .Fehler 			{grid-column: span 12;}
.Programmbereich.Teaser.ProgrammbereichMitHintergrund
{
	flex: 1;
	border-radius: var(--Radius);
	background-size: cover;
	background-position: top right;
}
.Programmbereich #content 	{box-sizing: content-box;}
.BildProgrammbereich
{
	margin: auto;
	margin-bottom: var(--Abstand);
	width: 100%;
	border-radius: var(--Radius);
	height: 150px;
	object-fit: cover;
}
body.Programmbereich .Programmbereich.Teaser.breite_0:not(.ProgrammbereichMitHintergrund)
, body.Programmbereich .Programmbereich.Teaser.breite_12:not(.ProgrammbereichMitHintergrund)
{
	flex-basis: 100%;
}
.Teaser.ProgrammbereichMitHintergrund a
{
	display: flex;
	align-items: end;
	min-height: 15rem;
	box-shadow: var(--Shadow);
	border-radius: var(--Radius);
	min-width: 14em;
	width: 100%;
}
.Teaser.ProgrammbereichMitHintergrund a > div
{
	flex: 1;
	background: white;
	padding: var(--Abstand);
	text-align: center;
	border-radius: 0 0 var(--Radius) var(--Radius);
	box-shadow: var(--HintergrundShadow);
	font-weight: bold;
}
.Programmuebersicht > .Programmbereiche
, .Programm.Detail > .Programmbereiche 		{gap: var(--Abstand);}
.Programmbereiche
{
	flex: 1;
	grid-column: span 12;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: row;
}
.InhalteProgrammbereich
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--Abstand);
}
.InhalteProgrammbereich > *		{flex-basis: 100%;}
.kartenbild
{
	width: 100%;
	max-height: none;
	border-radius: var(--Radius);
}
.Liste article 											{border-radius: var(--Abstand);}
.Liste.Teaser:not(.fensterbreit) .HintergrundFadeIn 	{border-radius: var(--Radius);}
.Liste.Teaser.Hintergrund .ArtikelTeaserText 			{background: white;}
article.Artikel.fensterbreit
, .fensterbreit
{
	display: flex;
	grid-column: span 12;
	justify-content: center;
	flex-wrap: wrap;
	padding: calc(var(--AbstandDoppelt) * 3) var(--Abstand);
	max-width: 100vw;
}
.Homepage header .Startseite.disabled 					{filter: grayscale(1); opacity: .5;}
.WarenkorbGrid
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	padding: var(--Abstand);
	background: var(--Hintergrund);
	border-radius: var(--Radius);
	overflow: hidden;
}
.WarenkorbGrid .Spaltenanzahl_2 							{gap: var(--AbstandHalb);}
.WarenkorbGrid .Spaltenanzahl_2 label::after 				{content: ":";}
.WarenkorbGrid .Spaltenanzahl_2 > div:nth-child(2n+1) label {padding-top: 0px;}
.WarenkorbGrid .KontaktText 								{padding: 0 var(--Abstand) 0 0;}
.WarenkorbGrid .Kontakt.Teaser .Inhalt
{
	box-shadow: var(--Shadow);
	background: white;
	max-width: 500px;
}
.Artikel.Teaser:has(summary), .Artikel.Teaser:has(summary) .Artikel
{
	box-shadow: none;
	outline: none;
}
.Artikel.Teaser .Inhalt 				{background: white;}
a.Artikel.Teaser
, .Applikationsreferenz.Hintergrund {display: flex; align-self: normal;}
table.Metadaten {width: max-content;}
table.Metadaten label {padding-right: var(--Abstand);}
a.Artikel.Teaser
{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border: 1px solid #e5dede;
}
.Artikel.Teaser.breite_12 > a > article
{
	display: flex;
	gap: var(--Abstand);
	border: solid 1px #ccc;
	box-shadow: black 0 0 30px -25px;
	border-radius: var(--Radius);
	flex-direction: column;
	overflow: hidden;
}
.Artikel.Teaser.breite_12 > a > article > figure {order: 2;}
.Artikel.Teaser.breite_12 > a > article img {border-radius: 0; height: auto; /*width: 300px; object-fit: cover;*/}
.fensterbreit a.Artikel.Teaser {display: flex; align-self: initial;}
.WarenkorbAnmeldung .Ansprechpartner {grid-column: span 2; margin: auto;}
.WarenkorbAnmeldung .Veranstaltung.Teaser .Inhalt .Ort
{
	grid-column: 1/2;
	justify-content: start;
	text-align: left;
}
body .Bild 				{display: flex;}
body.Bild figure 		{display: flex; flex-direction: column;}
.Bild.Platzhalter 		{opacity: .5;}
body.Ort h1 a.extern 	{display: block;}
.Honorarkraft .Bild.fensterbreit
, .Mitarbeiter .Bild.fensterbreit
, .Geschaeftsstelle .Bild.fensterbreit
, .Organisation .Bild.fensterbreit
, .Vhs .Bild.fensterbreit
, .Kontakt .Bild.fensterbreit
{
	display: block;
	margin: 0;
	width: auto;
}
.Mitarbeiter .Kopf .Bild:not(.Bildtext) img
, .Honorarkraft .Kopf .Bild:not(.Bildtext) img
, .Geschaeftsstelle .Kopf .Bild:not(.Bildtext) img
, .Vhs .Kopf .Bild:not(.Bildtext) img
{
	border-radius: var(--Radius);
}
.Mitarbeiter .Kopf .Bild img
, .Honorarkraft .Kopf .Bild img
, .Geschaeftsstelle .Kopf .Bild img
, .Vhs .Kopf .Bild img
, .Organisation .Kopf .Bild img
{
	max-height: 50vh;
	border-radius: 15px 15px 0 0 ;
}
.Mitarbeiter .Kopf h1
, .Honorarkraft .Kopf h1
, .Geschaeftsstelle .Kopf h1
, .Organisation .Kopf h1
, .Vhs .Kopf h1
{
	text-align: center;
}
.Logo
{
	background: white;
	padding: var(--Abstand);
	border-radius: var(--Radius);
}
.fensterhoch > * 					{flex-basis: auto;}
.ArtikelContainer .fensterhoch 		{height: auto;}
.Hintergrund article.a:focus		{box-shadow: black 0 0 5px 5px;}
.Hintergrund:not(.fensterbreit) 	{border-radius: var(--Radius);}
.ArtikelContainer
{
	flex: 1;
	grid-column: span 12;
}
.Hintergrund > .ArtikelContainer
{
	border-radius: var(--Radius);
	background: white;
	backdrop-filter: var(--BackdropBlur);
	box-shadow: var(--Shadow);
}
.Hintergrund .ArtikelContainer .ArtikelContainer
{
	padding: 0;
	border-radius: 0;
	background: none;
	backdrop-filter: none;
}
.check svg 							{height: 24px;}
#barrierefreiheit_leiste
{
	display: none;
	justify-content: center;
	gap: var(--Abstand);
	padding: var(--AbstandHalb);
}
#barrierefreiheit_leiste svg 		{height: 32px; padding-right: var(--AbstandHalb);}
nav > ul
{
	display: flex;
	gap: var(--Abstand);
	flex-direction: row;
	flex-wrap: wrap;
}
#barrierefreiheit_leiste .check
{
	justify-self: end;
	color: green;
	width: min-content;
	background: var(--Dunkler);
	padding: var(--Abstand);
}
#barrierefreiheit_leiste a div
, #barrierefreiheit_leiste summary div
{
	display: none;
}
#barrierefreiheit_leiste li 		{list-style-type: none;}
#barrierefreiheit_leiste a
, #barrierefreiheit_leiste details
{
	padding: var(--AbstandHalb);
}
.fensterbreit
, .Zusammenfassung
{
	grid-column: span 12;
	}
.KontaktHauptgeschaeftstelle
, .KontaktHauptgeschaeftsstelleText
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100vh;
}
.KontaktHauptgeschaeftstelleLinks ul
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 24px;
	justify-self: center;
	justify-content: center;
	padding: var(--Abstand);
}
.SocialMediaLeiste
{
	display: flex;
	padding-top: var(--Abstand);
	z-index: 50;
	top: 0;
	gap: var(--Abstand);
}
.breite_0.Applikationsreferenz > h2
, .breite_12.Applikationsreferenz > h2 {padding-top: calc(var(--AbstandDoppelt) * 2);}
.Applikationsreferenz.Bereichsnavigation {padding-top: 0;}
.HintergrundContainer + .Applikationsreferenz {padding-top: 0;}
.HintergrundContainer + script + .Applikationsreferenz {padding-top: 0;}
.KontaktHauptgeschaeftsstelle
, address
, .HauptgeschaeftstelleInhalte
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	align-items: left;
}
.Facebook-Likebutton .flex {gap: unset; justify-content: center;}
.KontaktHauptgeschaeftsstelle
, .HauptgeschaeftstelleInhalte
{
	align-items: center;
}
.HauptgeschaeftsstelleContainer {
	gap: 20vh;
}
#merken > div {display: flex; flex-direction: column; gap: var(--Abstand);}

.Sticky0 				{position: relative; z-index: 100000; top: -1px;}
.anmeldungsliste .flex 	{align-items: start;}
.Zusatznavigation ul 	{flex-direction: column; grid-template-columns: 1fr;}
header nav 	{flex-basis: 100%;}
header.sticks.Sticky0 nav 	{flex-basis: auto;}
.Homepage header nav 	{display: block;}
.burger 				{display: flex; justify-content: center; flex-basis: 100%;}
.burger ul 				{grid-template-columns: 1fr; grid-column: span 12;}
.burger + ul 			{margin-top: var(--Abstand);}
:is(.Veranstaltung, .Programmbereich) .sticks .burger
{
	position: fixed;
	right: 0;
	bottom: 30vh;
}
:is(.Veranstaltung, .Programmbereich) .sticks .burger a
{
	background: #0008;
	color: white;
	border-radius: 5px 0 0 5px;
	box-shadow: white 0 0 30px 0px;
	backdrop-filter: blur(4px);
}
:is(.Veranstaltung, .Programmbereich) .sticks #header_navi
{
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: var(--Abstand);
	/* background: rgba(255, 255, 255, 0.933); */
	background: #0008;
	box-shadow: white 0 0 30px 0px;
	backdrop-filter: blur(4px);
}
:is(.Veranstaltung, .Programmbereich) .sticks #header_navi :is(a:link, a:hover, a:visited)
{
	background: white;
}
:is(.Veranstaltung, .Programmbereich) .sticks .burger .label {display: none;}
.weiter 				{display: flex; justify-content: end;}

.benutzerfuehrung a
, a.benutzerfuehrung {width: max-content; background: #cceecc; border-radius: var(--Radius); padding: var(--Abstand);}
.entfernen.button {max-width: max-content;}
.WarenkorbAnzahl
{
	border-radius: 5px;
	background: red;
	color: white;
	padding: 0px 5px;
	font-weight: bold;
}
.layoutgrid 			{border-collapse: separate;}
.layoutgrid > tbody > tr > td:first-child
{
	background: var(--Hintergrund);
	backdrop-filter: var(--link_backdrop);
	text-align: right;
	min-width: 80px;
}
.layoutgrid > tbody > tr > td 				{padding: var(--AbstandHalb);}
.layoutgrid > tbody > tr:first-child > td 	{border-radius: 5px 0 0 0;}
.layoutgrid > tbody > tr:last-child > td 	{border-radius: 0 0 0 5px;}
.Button
, button
{
	cursor: pointer;
	padding: var(--Abstand);
	color: var(--ButtonColor);
	background: var(--ButtonBackground);
	flex: 1;
	text-align: center;
	border-radius: var(--Radius);
	border: none;
}
a.Button:link 		{color: var(--ButtonColor); text-decoration: none;}
.Button img 		{vertical-align: middle;}
.Button:hover
, button:hover
{
	text-decoration: none;
}
a.Button:visited 	{color: white;}
.flex
{
	display: flex;
	gap: var(--Abstand);
	flex-wrap: wrap;
	align-items: center;
}
.RadioUndLabel
{
	display: flex;
	gap: var(--Abstand);
	align-items: baseline;
	background-color: var(--Hintergrund);
	margin: var(--Abstand) 0;
	padding: var(--Abstand);
    border-radius: var(--Radius);
}
.RadioUndLabel label
{
	width: 100%;
}
.Layoutbreite
{
	max-width: var(--breite_layout);
	flex-basis: var(--breite_layout);
	grid-column: span 12;
}
.breite_12
, .breite_11
, .breite_10
, .breite_9
, .breite_8
, .breite_7
, .breite_6
, .breite_5
, .breite_4
, .breite_3
, .breite_2
, .breite_1
, .breite_0 {grid-column: span 12; flex-basis: 100%;}
.Hauptbereich .Programmbereich.Teaser {display: flex; grid-column: span 1;}
.Hauptbereich li a
{
	display: flex;
	align-items: center;
	gap: var(--Abstand);
	background: var(--Hintergrund);
	padding: var(--Abstand);
	border-radius: var(--Radius);
	flex: 1;
}
.Hauptbereich li img {width: 64px;}
.Hauptbereich li h2 {font-size: 1rem;}
.Hintergrund .Hauptbereich li h2 {text-align: center;}
.HintergrundFixiert {background-attachment: fixed !important;}
.Hintergrund > p
, article.inhalt
{
	border-radius: var(--Radius);
	background: var(--WeissTransparent);
	backdrop-filter: var(--BackdropBlur);
}
.Hintergrund {grid-column: span 12;}
.Hintergrund .Hauptbereich li a:hover
{
	outline: 2px solid white;
	outline-offset: 2px;
}
div:not(.fensterbreit) .HintergrundBild,
div:not(.fensterbreit) .HintergrundContainer:not(.fensterbreit, body > .HintergrundContainer) {border-radius: var(--Radius);}
.fensterbreit > .HintergrundContainer > .HintergrundBild {border-radius: 0;}
.Video {align-items: center; display: flex; align-items: stretch; flex-direction: column;}
.Spaltenanzahl_2 /*todo*/ {display: grid; grid-template-columns: 1fr; gap: 1px;}
.Spaltenanzahl_3 		{display: grid; grid-template-columns: 1fr; align-items: initial;}
.Spaltenanzahl_3.Checkbox, .Spaltenanzahl_2.Checkbox {margin-bottom: 5px; align-items: start;}
section.Login 			{flex-basis: 100%;}
#passwort 				{margin-bottom: var(--Abstand);}
.Datum, .Uhrzeit {white-space: nowrap;}
.WeitereKursedesKursleiters h2 {margin-bottom: var(--Abstand); gap: 0;}
.WarenkorbButton 							{flex-basis: 100%;}
.Anmeldeseite 	{display: flex; flex-direction: column; gap: var(--Abstand);}
#abschluss 		{display: flex; flex-direction: column; gap: var(--Abstand);}
#abschluss > div {position: sticky; top: 0;}
.AnmeldeButton {flex-basis: 100%; text-align: center;}
.AnmeldeButton p {flex-basis: 100%; text-align: left;}
.AnmeldeButton .Anmeldelink {display: block;}
.Anmeldelink svg {width: 48px;}
.Ampelbar .Anmeldelink svg {display: none;}
.Veranstaltung.Teaser .Anmeldelink span {display: none;}
#suche {grid-column: span 12; border-radius: var(--Radius);}
#suche #suchformular fieldset
{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	max-width: none;
}
#suche #erweitert li {flex: 1; white-space: nowrap;}
#suche #erweitert > *
{
	background: var(--Hintergrund);
	backdrop-filter: var(--BackdropBlur);
	padding: var(--Abstand);
	border-radius: var(--Radius);
}
#suche #erweitert > .Orte
{
	padding: 0;
}
#suche #erweitert>details[open] {flex-basis: 100%;}
#suche #erweitert
, .Artikel #suche #erweitert
{
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--Abstand);
}
.Suche #suche #erweitert {display: none; grid-column: span 2;}
#suche #erweitert ul
{
	flex-direction: row;
	gap: var(--Abstand);
	align-items: flex-start;
}
#suche #erweitert li
{
	max-width: 100%;
	/* overflow: hidden; */
	text-overflow: ellipsis;
}
#suche #erweitert.ausblenden 		{display: none}
#suche #erweitert .Wochentage ul 	{gap: var(--Abstand); flex-wrap: wrap;}
#Orte ul
{
	display: grid;
	grid-template-columns: 1fr;
}
.Checkboxspalte 					{text-align: right;}
.Zufallskurse .Inhalt
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--Abstand);
}
.Albumvorschau > a {grid-column: span 6;}
.Albumvorschau figure
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.Albumvorschau figcaption
{
	min-width: 100%;
}
.Albumvorschau img
{
	transition: .3s ease;
	width: 100%;
	max-width: none;
	box-shadow: var(--shadow);
	border-radius: var(--Radius);
}
figure img {border-radius: var(--Radius); max-width: 100%;}
figure:has(figcaption) img			{border-radius: var(--Radius) var(--Radius) 0 0;}
.Albumvorschau img:hover 	{transition: .3s ease; filter: brightness(1.2);}
.Albumvorschau a:visited 	{border: solid red 5px;}
body.Album 					{background: black; color: white; padding: 0;}
body.Album a:link
, body.Album a:active
, body.Album a:visited
, body.Album a:hover 		{color: white;}
body.Album header 			{background: var(--Heller);}
body.Album header * 		{background: none !important;}
body.Album
{
	grid-column: span 12;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.Album.breite_0 {justify-self: normal;}
body.Album .close
{
	display: none;
	position: fixed;
	top: 5px;
	right: 5px;
	padding: var(--Abstand);
	z-index: 99999;
	fill: #aaaa;
	height: 64px;
	width: 64px;
	background: none;
}
body.Album .close {color: white; background: var(--Rauchglas); border-radius: 5px;}
.Album .close * 	{background: none;}
.Album main > div 	{flex: 1;}
.Album h1 			{text-align: center;}
.AlbumListe
{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
}
.AlbumListe > div
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	justify-content: center;
	align-items: center;
}
body.AlbumListe img {opacity: .2;}
*.AlbumListe img {opacity: .2;}
.AlbumListe img.komplettSichtbar {opacity: 1; transition: .3s ease-out;}
.AlbumListe .Pfeil {display: none;}
.AlbumListe > div {min-height: 100vh;}
.KontaktTeaserBild {order: 1;}
.KontaktTeaserBild > picture > img
{
	border-radius: var(--Radius) var(--Radius) 0 0;
	width: 100%;
	box-shadow: black 7px 0px 10px -10px;
}
.Hintergrund .Tagcloud h2
, .Hintergrund.Tagcloud h2 {color: whitesmoke; text-align: center;}
.Hintergrund .Tagcloud
, .Hintergrund.Tagcloud > div:not(.HintergrundContainer)
{
	background-color: var(--Rauchglas);
	box-shadow: white 0 0 30px -15px;
	backdrop-filter: var(--BackdropBlur);
	padding: var(--AbstandDoppelt);
	max-width: var(--breite_layout);
	border-radius: var(--Radius);
}
.Hintergrund.Tagcloud > div:not(.HintergrundContainer)
, .Hintergrund.Tagcloud:not(.fensterbreit) > div
{
	border-radius: var(--Radius);
}
.Hintergrund.Tagcloud .Wortwolke .Wort {border: none; color: whitesmoke; background: none;}
.HintergrundContainer + script + .Tagcloud {padding: var(--AbstandDoppelt);}
.Wortwolke {font-size: 1rem; margin-top: var(--Abstand);}
.Wortwolke .Wort
{
	padding: .3em 1em !important;
	margin: 5px;
	border-radius: 1em;
	color: white;
}
.Wortwolke .Wort:nth-child(even) 	{float: right;}
.Wortwolke .Wort:nth-child(odd) 		{float: left;}
.Ampelbar > div:last-child {flex: 1; display: flex; justify-content: end;}
.Ampelbar img.icon
, .Ampelanzeige img.icon {height: 20px;}
.Anmeldebuttons {flex-basis: 100%;}
.Kontakt.Detail {grid-column: 3 / span 8; justify-self: normal;}
.Channels > div {display: flex; flex-direction: column; gap: var(--Abstand);}
.Channelliste {display: flex; flex-direction: column; gap: var(--Abstand);}
.MeineVeranstaltungen .Warenkorblink.button {display: none;}
.MeineVeranstaltungen {display: flex; flex-direction: column; gap: var(--Abstand);}
.meldung
{
	padding: var(--Abstand);
	border-radius: var(--Radius);
	color: white;
	font-weight: bold;
}
.meldung.fehler 		{background: red;}
.meldung.warn 			{color: black; background: var(--Hintergrund);}
.meldung.info 			{color: black; background: var(--Hintergrund);}
.AnwesenheitenListe
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
}
.Anwesenheit
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: var(--Radius);
}
.Anwesenheit.teilgenommen 			{border: solid green 5px;}
.Anwesenheit.nichtTeilgenommen 		{border: solid red 5px;}
.Anwesenheit a 						{display: block; padding: var(--Abstand);}
.AnwesenheitButton 					{flex: 1;}
.Anwesenheit .Details 				{flex-basis: 100%; padding: var(--Abstand);}
.align_items_start 					{align-items: start !important;}
.align_items_center 				{align-items: center !important;}
.align_items_end 					{align-items: end !important;}
.align_items_stretch				{align-items: stretch !important;}
.justify_start
{
	justify-content: start !important;
	justify-items: start !important;
}
.justify_end {
	justify-content: end !important;
	justify-items: end !important;}
.justify_center {
	justify-content: center !important;
	justify-items: center !important;}
.Veranstaltung.align_items_start .Inhalt
{
	position: sticky;
	top: var(--AbstandDoppelt);
}
.Veranstaltung.align_items_end:not(.Abbinder) .Inhalt
{
	position: sticky;
	bottom: var(--AbstandDoppelt);
}
.Veranstaltung figure ~ table 		{clear: both;}
.Kontakt .ueberschrift_profil 		{display: none;}
body.Kontakt .Bild.breite_12.fensterhoch figure {height: auto;}
body.Kontakt.Hintergrund .fensterbreit {padding: 0;}
body.Artikel > div > div.HintergrundFadeIn
, body.Artikel > div > video.HintergrundFadeIn
{
	transition: opacity .7s ease;
	opacity: 1;
}
#Registrierung {grid-column: span 12;}
.ergebnis ul
, .BereichInProgrammheft ul {/*justify-content: center;*/ flex-direction: row; flex-wrap: wrap;}
.ergebnis > *
, .ProgrammheftInhalt > * {
	display: flex;
	gap: var(--Abstand);
	flex-direction: row;
	flex-wrap: wrap;
}
.Programm > div {grid-column: span 12;}
.ProgrammheftInhalt ul > li > article {flex-basis: 100%;}
.BereichInProgrammheft .ElternProgrammbereich {padding-top: var(--Abstand);}
.BereichInProgrammheft .ElternProgrammbereich a {display: inline;}
.BereichInProgrammheft .ElternProgrammbereich::before 	{content: "Sie befinden sich hier: ";}
.Programmheft {padding-bottom: 100vh;}
/* Einkauf */
.Produkt.bodyDetail h1 {text-align: left;}
.Produkt.Teaser:not(.Kontakt .WarenkorbAnmeldung > .Produkt)
{
	background: var(--Dunkler);
	padding: var(--Abstand);
	overflow: hidden;
}
.Produkt.Teaser
, .Produkt.Teaser .Inhalt
, .Produktgruppe.Teaser .Inhalt
{
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--Radius);
	gap: 15px;
	color: black;
}
.Produkt.Teaser > a:focus {outline-width: 0;}
.Produkt .Preis {display: flex; gap: 5px; flex-direction: row;}
.Produkt .Preis .Betrag {font-weight: bold;}
.Produkt.Teaser picture {overflow: hidden;}
.Produkt.Teaser img {min-height: 7rem; max-height: 17vh; max-width: 200px;}
.Kooperation.bodyDetail h1 {text-align: left;}
.Kooperation.Teaser a {background: var(--Dunkler); overflow: hidden;}
.Kooperation.Teaser .Inhalt {display: flex; border-radius: var(--Radius); gap: 15px;}
.KooperationText {padding: var(--Abstand);}
.Kooperation.Teaser > a:focus {outline-width: 0;}
.Kooperation.Teaser picture {overflow: hidden;}
.Kooperation.Teaser img {min-height: 7rem; max-height: 17vh; max-width: 200px;}
.ProduktText {text-align: center; color: black;}
.Produktgruppe.Teaser {background: var(--Dunkler); border-radius: var(--Abstand);}
.Produktgruppe.Teaser > .Inhalt {padding: var(--Abstand);}
.EinkaufspositionAnzahl
{
	display: flex;
	flex-direction: column;
	gap: var(--Abstand);
	align-items: center;
	gap: 0;
	/* border: solid 2px gray; */
	border-radius: var(--Radius);
	background: white;
}
.EinkaufspositionAnzahl .Buttons
{
	font-weight: bold;
	flex-basis: 100%;
	display: flex;
}
.EinkaufspositionAnzahl .Buttons > *
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 2rem;
	user-select: none;
	border-radius: 0;
}
.EinkaufspositionAnzahl a.Button:link 		{color: gray; border-width: 0;}
.EinkaufspositionAnzahl a.Button:focus 		{z-index: 30;}
.EinkaufspositionAnzahl a.Button.remove 	{border-radius: var(--Abstand) 0 0 var(--Abstand);}
.EinkaufspositionAnzahl a.Button.add 		{border-radius: 0 var(--Abstand) var(--Abstand) 0;}
.EinkaufspositionAnzahl input
{
	border-width: 0;
	border-radius: 0;
	min-width: 4rem;
	padding: 5px;
	text-align: center;
	font-size: 2rem;
	appearance: textfield;
}
.EinkaufspositionAnzahl div {z-index: 20;}
.EinkaufspositionAnzahl svg {width: 32px; height: 32px;}
/* ENDE Einkauf */
.Kontaktdaten:empty {display: none;}
.Kontaktdaten {
	display: grid;
	grid-template-columns: min-content auto;
	align-items: start;
	padding: var(--Abstand);
	gap: 0px 10px;
}
.Kontaktdaten .Webadresse {grid-column: span 2;}
.Kontaktdaten :is(.Adresse, .Emailadresse) {
	flex-direction: column;
	align-items: start;
	text-wrap: nowrap;
}
#dsvgobox {text-wrap: wrap;}
.Verantwortlicher {display: flex; flex-direction: column; gap: var(--Abstand);}
.Verantwortlicher h2 {padding-top: unset !important;}
.Verantwortlicher .Kontakt.Teaser img {width: 120px; min-height: 120px;}
.Verantwortlicher .Kontakt.Teaser {max-width: 400px;}
.hauptveranstaltungen .Veranstaltung.Teaser {padding: 5px 15px;}
.VeranstaltungTeaserInhalt
{
	flex: 1;
	display: grid;
	grid-template-columns: auto min-content;
	gap: var(--AbstandHalb);
	padding: var(--Abstand);
}
.Veranstaltung.Teaser .Grafik {object-fit: initial; align-self: center;}
.VeranstaltungTeaserInhalt h2 {font-size: 1rem;}
.merkenInTeaser {display: flex; justify-content: end; padding: var(--Abstand);}
.Fehler404 {grid-column: span 12;}
#weitermeldungen > div {display: flex; flex-direction: column; gap: var(--Abstand);}
#anrufe { display: none;}
.Veranstaltung #ansprechpartner {white-space: nowrap;}
#KommentarSpeichern {width: 38.2%;}

.Empfehlung a.Veranstaltung.Teaser
{
	display: inline;
}

.Slider:not(.fensterbreit) .HintergrundContainer {border-radius: var(--Radius);}
.Slider h1 {text-align: center;}
.SliderBar .SliderItem .Text {padding-bottom: 40px;}
.Slider .HintergrundFadeIn {opacity: 0.3}
.Liste.Slider.fensterbreit {padding: var(--Abstand);}
.Liste.fensterbreit.Hintergrund .Text   {border-radius: var(--Radius);}
.Slider:not(.fensterbreit) {
	position: relative;
	overflow: hidden;
	border-radius: var(--Radius);
	}
.SliderBar {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	}
.SliderItem {
	min-width: 100%;
	max-width: 100%;
	margin: auto;
	}
.SliderItem:empty {display: none;}
.SliderForward
, .SliderBackward {
	position: absolute;
	color: #252525;
	font-size: 10vw;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: var(--Abstand);
	font-weight: bold;
	user-select: none;
	z-index: 30;
	display: none;
	}
.SliderForward>*
, .SliderBackward>* {display: block;}
.SliderItem > .Inhalt {padding: 0;}
.SliderBackward {
	left: 0;
	top: 0;
	bottom: 0;
	padding: 30px 30px 30px 0px;
	}
.SliderForward {
	right: 0;
	bottom: 0;
	top: 0;
	padding: 30px 0px 30px 30px;
	}
.Text.Hintergrund
{
	box-shadow: black 0 0 15px -5px;
	padding: var(--AbstandDoppelt);
}
.Slider .HintergrundFadeIn
{
	animation: none;
	animation-delay: unset;
	opacity: 0.3;
	transition: none;
}
.Slider .Text > div {margin: auto;}
.Liste.Slider
{
	gap: var(--Abstand) 0;
}
.Slider .fensterbreit {justify-content: normal;}
.Hintergrund .Hauptbereich li a {background: white;}
.Tabelle table, .Tabelle td {
	border: 1px solid grey;
	padding: 10px;
	border-collapse: collapse;
}

/* Anfang der Media Queries. Unter den Media Queries keine weitere Selektoren und Regeln hinzufügen */

@media only screen and (min-width: 558px)
{
	.merkenInTeaser {padding: var(--Abstand) var(--Abstand) var(--Abstand) 0;}
    .Veranstaltungskalender .Veranstaltung.Teaser  a  .Inhalt > picture,
	.HeuteBeginnendeVeranstaltungen .Veranstaltung.Teaser > a > .Inhalt > picture,
	.Kurspusher .Inhalt > picture,
	.Zufallskurse .Inhalt > picture
    {
        display: flex;
    }
	.Artikel.Teaser.breite_12 > a > article
	{
		flex-direction: row;
	}
	body.Hintergrund{
		padding-top: var(--Abstand);
	}
	.Veranstaltung.Teaser .Thumbnail img {max-height: 38.2vh;}
}

@media only screen and (min-width: 1214px)
{
	.Sticky0 {position: sticky; z-index: 100040; top: var(--HoeheSticky0);}
	.Sticky1 {position: sticky; z-index: 100030; top: var(--HoeheSticky1);}
	.Sticky2 {position: sticky; z-index: 100020; top: var(--HoeheSticky2);}
	.Sticky3 {position: sticky; z-index: 100010; top: var(--HoeheSticky3);}
	.VeranstaltungTeaserInhalt
	{
		padding: var(--Abstand) 0 var(--Abstand) var(--Abstand);
	}
	.BereichInProgrammheft ul {gap: var(--Abstand);}
	.Veranstaltung.Teaser {flex-direction: row;}
	.begonnen .merkenInTeaser {display: none;}
	.begonnen + .begonnen + .begonnen + .begonnen {flex-basis: 25%; flex-grow: 1;}
	.begonnen + .begonnen + .begonnen + .begonnen .Nummer {display: none;}
	.begonnen + .begonnen + .begonnen + .begonnen .Name {flex: 1;}
	.sticks .burger
	{
		position: relative;
		right: initial;
		bottom: initial;
		padding: initial;
		background: initial;
		border-radius: initial;
		box-shadow: initial;
	}
	:is(.Veranstaltung, .Programmbereich) .sticks #header_navi
	{
		position: relative;
		bottom: initial;
		left: initial;
		right: initial;
		padding: initial;
		background: initial;
		box-shadow: initial;
	}
	.Kontaktdaten :is(.Adresse, .Emailadresse) {display: flex; flex-direction: column; gap: var(--Abstand);}
	.Artikel > article {flex: initial;}
	.Artikel section.Programmbereich {flex-direction: row; flex-wrap: wrap;}
	.Kontaktdaten {padding: var(--Abstand); background: var(--Dunkler); border-radius: var(--Radius);}
	main > *.Hintergrund.fensterbreit:last-child {margin-bottom: calc(-25vh - var(--Abstand))}
	#LogoUndText {flex: 0;}
	/* Einkauf */
	.Produkt.Teaser {display: grid; grid-template-columns: 3fr 1fr;}
	.Produkt.Teaser .Inhalt
	, .Produktgruppe.Teaser a
	{
		display: grid;
		grid-template-columns: min-content auto;
	}
	.Produkt.Teaser, .Produktgruppe.Teaser a > * {flex: initial;}
	.Produkt.Teaser, .Produktgruppe.Teaser a {flex-direction: row;}
	.Produkt.Teaser > div {flex: 0;}
	.Produkt.Teaser img:not(.WarenkorbAnmeldung .Produkt.Teaser img) {border-radius: 0;}
	.ProduktText {text-align: left;}
	.Produkt.Teaser picture {margin: calc(var(--Abstand) * -1); margin-right: 0;}
	.Produkt.Teaser img {margin-top: -15px; margin-bottom: -15px;}
	.EinkaufspositionAnzahl
	{
		flex-basis: auto;
	}
	/* ENDE Einkauf */
	.JournalVorschauliste .Journaleintrag {flex: 1; min-width: 300px;}
	#header_logo, #header_logo_darkmode {max-width: 50vw; margin: auto;}
	.Produkt.Teaser img:not(.WarenkorbAnmeldung .Produkt.Teaser img) {border-radius: 0;}
	.ProduktText {text-align: left;}
	#header_logo img, #header_logo_darkmode img	{max-width: 50vw;}
	h1 {font-size: 2rem;}
	details[open] > summary
	{
		font-size: 1.5rem;
		display: block;
	}
	body.Hintergrund > *:not(.HintergrundContainer, .Applikationsreferenz, section, footer)
	{
		border-radius: var(--Radius);
	}
	#suche #erweitert .Wochentage ul 	{flex-wrap: nowrap;}
	body.Hintergrund #barrierefreiheit_leiste
	{
		border-radius: 0 0 var(--Radius) 0;
		justify-self: start;
	}
	body.Hintergrund header {margin: initial;}
	body.Hintergrund footer
	{
		margin-left: calc(var(--AbstandDoppelt) * -1);
		margin-right: calc(var(--AbstandDoppelt) * -1);
		margin-bottom: calc(var(--AbstandDoppelt) * -1);
	}
	body.Hintergrund main {margin: auto;}
	.Homepage header .Startseite
	, .Homepage header #suche
	{
		display: block;
	}
	#suche #erweitert{flex-direction: row;}
	#suche #erweitert ul {flex-direction: row;}
	#suche #suchformular fieldset {display: grid; grid-template-columns: 61.8fr 38.2fr;}
	.Artikel #suche #suchformular fieldset, #suche #suchformular fieldset {display: flex}
	#suchbox {flex-basis: 100%;}
	#suchbutton {flex-basis: 100%;}
	.WarenkorbAnmeldung .Ansprechpartner {margin: 0;}
	.Kontakt.Teaser img
	{
		max-height: 250px;
		overflow: hidden;
	}
	#header_logo img, #header_logo_darkmode img {max-width: 25vw;}
	nav li {flex: initial;}
	.Veranstaltung.Teaser .Inhalt {flex-direction: row; padding: 0; gap: 0;}
	.Veranstaltung.Teaser .Thumbnail {width: auto;}
	.Veranstaltung.Teaser > a > .Inhalt > picture {width: 200px; align-self: normal; display: flex;}
	.Veranstaltung.Teaser > a > .Inhalt > picture:has(.Logo, .Grafik) {padding: var(--Abstand); background: var(--Dunkler);}
	.VeranstaltungTeaserInhalt {padding: var(--Abstand);}
	.Veranstaltung.Teaser img.Bild:not(.Logo)
	{
		max-width: 200px;
		margin-left: 0;
		border-radius: var(--Abstand) 0px 0px var(--Abstand);
		background: var(--Dunkler);
	}
	.Kachel .Veranstaltung.Teaser:not(.begonnen, .beendet)
	, .Kachel.Veranstaltung.Teaser:not(.begonnen, .beendet)
	{
		display: flex;
		flex-basis: calc(50% - var(--Abstand) / 2);
		max-width: calc(50% - var(--Abstand) / 2);
		border: solid 1px #ccc;
		border-radius: var(--Radius);
		box-shadow: black 0 0 30px -25px;
	}
	.Kachel .Veranstaltung.Teaser:not(.begonnen, .beendet) .Inhalt
	, .Kachel.Veranstaltung.Teaser:not(.begonnen, .beendet) .Inhalt
	{
		display: grid;
		grid-template-rows: 61.8fr 38.2fr;
		align-items: start;
		background: white;
	}
	.Kachel .Veranstaltung.Teaser img.Bild
	, .Kachel.Veranstaltung.Teaser img.Bild
	{
		max-width: none;
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
	.Kachel .Veranstaltung.Teaser > a > .Inhalt > picture
	, .Kachel.Veranstaltung.Teaser > a > .Inhalt > picture
	{
		width: 100%;
		max-width: 100%;
	}
	.Kachel .Veranstaltung.Teaser > a > .Inhalt > picture {width: 100%; max-width: 100%;}
	a .Bild.Detail img:hover {transition: .3s; filter: brightness(1.2);}
	.Benutzer a.eigenesBild img {border-radius: 50%; height: 57px;}
	.Benutzer a.eigenesBild {padding: 0; padding-top: var(--AbstandHalb);}
	.Benutzer a.eigenesBild .label {display: none;}
	details > article.Teaser {display: grid;}
	article.Teaser {display: block;}
	a:not(.fensterbreit, .Hintergrund) article.Inhalt {overflow: hidden; flex: 1; align-self: normal;}
	.WarenkorbListe {align-items: normal; gap: var(--Abstand);}

	.Teaser.Hintergrund.Abbinder
	, .ProgrammbereichMitHintergrund.Teaser			{transition: .3s;}
	.Teaser.Hintergrund.Abbinder:hover
	, .ProgrammbereichMitHintergrund.Teaser:hover {transition: .3s; filter: brightness(1.1);}
	article details .Veranstaltung.Teaser .Inhalt
	, .Teaser.Hintergrund > .Inhalt
	{
		transition: .3s;
		background: white;
	}
	.Teaser.Hintergrund:hover > .Inhalt
	{
		transition: .3s;
		background: var(--WeissTransparent);
	}
	article.Inhalt p
	{
		clear: left;
	}
	.Hintergrund > .Liste > div > article
	{
		padding: var(--Abstand);
	}
	.Album.Teaser {gap: 5vh;}
	.Spaltenanzahl_2
	{
		grid-template-columns: 38.1fr 61.8fr;
		align-items: start;
		gap: var(--Abstand);
	}
	.Spaltenanzahl_2 > div:nth-child(odd) label
	{
		display: block;
		white-space: normal;
		padding-top: var(--Abstand);
	}
	.anmeldungsliste .Spaltenanzahl_2 > div:nth-child(odd) label
	{
		padding-top: 0;
	}
	.Spaltenanzahl_2 > div:nth-child(even) {align-self: center;}
	.Spaltenanzahl_3 	{grid-template-columns: 1fr 1fr 1fr;}
	.Spaltenanzahl_3.Checkbox, .Spaltenanzahl_2.Checkbox {margin-bottom: 4px; align-items: start;}
	.Wunschpasswort {padding-top: 40px;}
	#header nav.Zusatznavigation
	{
		grid-column: 1/4;
		background: var(--Hintergrund);
		width: 100%;
		border-radius: var(--Radius);
	}
	#header nav.Zusatznavigation ul 	{justify-content: center; gap: 0;}
	.Zusatznavigation .Navigationsebene {gap: unset;}
	/*.Zusatznavigation .Navigationspunkt .Navigationsinhalt:hover {background-color: var(--grau);}*/
	.Zusatznavigation .Navigationspunkt:not(.Ebene_0) {background-color: var(--hellgrau);}
	.Navigationspunkt
	{
		display: block;
		position: relative;
		white-space: nowrap;
	}
	.Navigationspunkt .Navigationspunkt {background: var(--Hintergrund);}
	.Navigationsinhalt 	{padding: 5px;}

	.Navigationscontainer {flex: 1; position: absolute;}
	#header nav .Navigationscontainer ul {flex-direction: column;}
	.Navigationscontainer {flex: 1;}
	.Ebene_1>.Navigationscontainer {left: 100%; top: 0px;}
	.Ebene_2>.Navigationscontainer {left: 100%; top: 0px;}
	.Ebene_3>.Navigationscontainer {left: 100%; top: 0px;}
	.Ebene_0 .Navigationsebene 		{position: relative; top: 1px;}
	.Ebene_1 .Navigationsebene 		{position: relative; top: 0px; left: 1px;}
	.Navigationspunkt {transition: all .5s ease; z-index: 10;}
	.Navigationspunkt .Navigationsebene
	{
		transition: all .5s ease;
		opacity: 0;
		width: 0;
		height: 0;
		overflow: hidden;
		transform: scale(0.8);
	}
	.Navigationspunkt:hover > .Navigationscontainer > .Navigationsebene
	{
		opacity: 1;
		transform: scale(1);
		transform-origin: top left;
		width: auto;
		height: auto;
		overflow: visible;
	}
	#barrierefreiheit_leiste
	{
		justify-content: start;
	}
	.DokumentDarstellung
	{
		grid-column: span 12;
		display: flex;
		flex-direction: column;
		gap: var(--Abstand);
	}
	.DokumentDarstellung thead.Sticky2 {position: initial;}
	.DokumentDarstellung:not(body.Hintergrund .DokumentDarstellung)
	{
		overflow: hidden;
		padding: 60px;
		box-shadow: black 0 0 20px -10px;
		border-radius: var(--Radius);
		background: white;
		margin-top: calc(var(--Abstand) * 4);
	}
	.DokumentDarstellung ul
	{
		display: block;
		list-style-type: disc;
		padding-left: 20px;
	}
	.DokumentDarstellung span
	{
		position: initial;
	}
	.DokumentDarstellung table.standard tr th {background: var(--Dunkler);}
	.page_addition_first_page {margin-top: -.5cm;}
	.Veranstaltung.Teaser .Inhalt {
		justify-content: space-between;
		align-items: start;
		flex-wrap: nowrap;
	}
	.Veranstaltung.Teaser .Inhalt .Titel {grid-column: 1/2;}
	.Veranstaltung.Teaser .Inhalt .Nummer 			{flex-grow: 1;}
	.Veranstaltung.Teaser .Inhalt .Nummer::before 	{content: "(";}
	.Veranstaltung.Teaser .Inhalt .Nummer::after 	{content: ")";}
	.Veranstaltung.Teaser .Inhalt .Ampelanzeige 	{text-align: right; grid-row: 1/2;}
	.Veranstaltung.Teaser .Inhalt .Veranstaltung 	{justify-content: flex-start;}
	.Veranstaltung.Teaser .Inhalt > div:last-child 	{margin-right: 0px;}
	.Veranstaltung.Teaser .Inhalt .Ampel .icon 	{width: 17px; height: 12px;}
	.Anmeldung.Teaser
	{
		display: flex;
		gap: var(--Abstand);
		flex-direction: column;
	}

	.Einkaufsposition#LogoUndText {display: flex; gap: var(--Abstand); flex: 1;}
	.Einkaufsposition .Kopf 	{display: flex; gap: var(--Abstand);}
	.anmeldungsliste .box
	{
		background: var(--Hintergrund);
		padding: var(--Abstand);
		border-radius: var(--Radius);
	}
	.flexcolumn.stornierteVeranstaltung .Anmeldung.Teaser .Spaltenanzahl_2 {background:#fb9e9e;}
	.Anmeldung.Teaser .Spaltenanzahl_2
	{
		background: var(--Hintergrund);
		padding: var(--Abstand);
		border-radius: var(--Radius);
		grid-template-columns: min-content auto;
	}
	.Anmeldung.Teaser .Spaltenanzahl_2 label
	{
		padding-top: 0;
	}
	.Anmeldung.Teaser .Spaltenanzahl_2:empty
	{
		display: none;
	}
	.Anmeldung.Teaser > * {flex: 1;}
	.Honorarvertrag.Teaser {flex: 1; background: var(--Heller);}
	.Honorarvertrag .Teaser {display: flex; flex-direction: column; gap: var(--Abstand);}
	.Anmeldung main {width: auto; margin: auto;}
	nav > ul 	{display: flex; gap: var(--Abstand);}
	.breite_12 	{grid-column: span 12; flex-grow: 1; flex-basis: 100%;}
	.breite_11 	{grid-column: span 11; flex-basis: 91.6%;}
	.breite_10 	{grid-column: span 10; flex-basis: 83.3%;}
	.breite_9 	{grid-column: span 9; flex-basis: 75%;}
	.breite_8 	{grid-column: span 8; flex-basis: 66.6%;}
	.breite_7 	{grid-column: span 7; flex-basis: 58.3%;}
	.breite_6 	{grid-column: span 6; flex-basis: 50%;}
	.breite_5 	{grid-column: span 5; flex-basis: 41.6%;}
	.breite_4 	{grid-column: span 4; flex-basis: 33.3%;}
	.breite_3 	{grid-column: span 3; flex-basis: 25%;}
	.breite_2 	{grid-column: span 2; flex-basis: 16.6%;}
	.breite_1 	{grid-column: span 1; flex-basis: 8.3%;}
	#suchformular fieldset
	{
		display: grid;
		grid-template-columns: 61.8fr 38.2fr;
		padding: calc(var(--Abstand) * 6) 0;
		max-width: calc(var(--breite_layout) / 2);
		margin: auto;
	}
	.fensterbreit #suchformular {
		max-width: max-content;
		margin: auto;
	}

	.Hauptbereich {justify-self: initial; flex-basis: 80%;}
	ol.Hauptbereich
	{
		display: flex;
		flex-wrap: wrap;
		gap: var(--Abstand);
		justify-content: center;
		max-width: max-content;
	}
	.Hauptbereich li a
	{
		display: flex;
		flex-direction: row;
		gap: var(--Abstand);
		align-items: center;
	}
	.fensterbreit > .HintergrundContainer > .Hintergrund {border-radius: 0;}
	.Hintergrund .Hauptbereich ol
	{
		border-radius: var(--Radius);
		padding: var(--AbstandDoppelt);
	}
	.Hauptbereich ol
	{
		flex-direction: row;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: var(--Abstand);
	}
	.fensterbreit .Hauptbereich ol {grid-template-columns: 1fr 1fr 1fr 1fr;}
	.Hintergrund .Hauptbereich li a
	{
		flex-direction: column;
		background: var(--Hintergrund);
	}
	.Hintergrund > div.Hauptbereich ol
	{
		background: var(--Rauchglas);
		box-shadow: white 0 0 30px -15px;
		gap: var(--AbstandDoppelt);
	}
	p a, table a, h1 a, h2 a, h3 a, h4 a, h5 a {display: inline;}
	.Albumvorschau > a {grid-column: span 2;}
	.AlbumListe {grid-template-columns: 1fr max-content 1fr;}
	.AlbumListe .Pfeil
	{
		height: 80vh;
		display: flex;
		align-items: center;
		transition: opacity 1s;
		opacity: 0.1;
		filter: blur(4px);
		align-self: center;
	}
	.AlbumListe .Pfeil:hover
	{
		transition: opacity 1.5s;
		opacity: .3;
		filter: blur(0);
	}
	.Mitarbeiter, .Geschaeftsstelle, .Vhs, .Organisation {margin-bottom: calc(var(--Abstand) * 4);}
	.Honorarkraft
	, .Honorarkraft .Kopf
	, .Mitarbeiter
	, .Mitarbeiter .Kopf
	, .Geschaeftsstelle
	, .Organisation
	, .Geschaeftsstelle .Kopf
	, .Organisation .Kopf
	, .Vhs
	, .Vhs .Kopf
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--Abstand) * 2);
		grid-column: span 12;
		margin-top: calc(var(--Abstand) * 2);
	}
	.Aufgabenbereich {text-align: center;}
	.Anmeldeseite {flex-direction: row;}
	article.Artikel.Hintergrund.fensterbreit:not(.positioniert)
	, .Hintergrund.fensterbreit:not(.positioniert, .SliderBar)
	{
		padding: calc(var(--Abstand) * 4);
	}
	.fensterbreit > .ArtikelContainer {flex: initial;}
	.Text.Detail.fensterbreit > div
	{
		background: var(--WeissTransparent);
		padding: var(--Abstand);
		backdrop-filter: var(--BackdropBlur);
		border-radius: var(--Radius);
	}
	.Hintergrund.fensterbreit + .Hintergrund.fensterbreit
	, .Bild.fensterhoch + .Hintergrund.fensterbreit
	, .Hintergrund.fensterbreit + .Bild.fensterhoch {margin-top: calc(var(--Abstand) * -1);}
	.fensterbreit.Layoutbreite
	{
		max-width: none;
		/*Wurde auskommentiert, da sonst Bilder in Layoutbreite und Fensterbreit das Grid zerstört haben.*/
		/*
		flex-basis: initial;
		grid-column: initial;
		*/
	}
	.fensterbreit.Layoutbreite .ArtikelContainer
	{
		max-width: var(--breite_layout);
		flex-basis: var(--breite_layout);
		grid-column: span 12;
	}
	.Programmuebersicht > .Programmbereiche
	, .Programm.Detail > .Programmbereiche
	{
		flex-direction: row;
	}
	.ProgrammbereichMitHintergrund.Teaser {background-position: center;}
	#header nav#header_navi a
	{
		display: flex;
		flex-direction: column;
		gap: var(--AbstandHalb);
	}
	#header nav ul 	{display: flex; flex-direction: row; justify-content: center;}
	#header nav a 	{background: none; border-radius: 0;}
	#header_text
	{
		color: #002d5c;
		font-size: 1.3rem;
		line-height: 1.1;
		font-weight: normal;
		max-width: 15em;
		margin: auto;
	}
	#header_text span 	{line-height: 1.1;}
	#header_text h3 {
		color: #002d5c;
		font-size: 1.3rem;
		line-height: 1.1;
		font-weight: normal;
	}
	.Hintergrund .Hauptbereich
	{
		flex-grow: 0;
	}
	header {padding-top: var(--Abstand);}
	.burger 								{display: none;}
	header nav 								{display: block;}
	h2 										{font-size: 1.5rem;}
	.Text figure
	{
		max-width: 50%;
		float: right;
		padding: 0 0 var(--Abstand) var(--Abstand);
	}
	.Zufallskurse .Veranstaltung > a {white-space: pre-wrap;}
	.Kontakt.Teaser {margin: 0;}
	.Kontakt.Teaser .Inhalt
	{
		flex-direction: row;
	}
	.Kontakt.Teaser .Inhalt > .KontaktText {flex: 1; order: initial;}
	.Kontakt.Teaser.breite_6 .Inhalt > .KontaktText > div
	, .Kontakt.Teaser.breite_4 .Inhalt > .KontaktText > div
	{
		max-height: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 340px;
	}
	.Kontakt.Teaser.breite_4 .Inhalt > .KontaktText > div
	{
		width: auto;
		white-space: normal;
	}
	.KontaktTeaserBild {order: initial;}
	.KontaktTeaserBild > picture > img
	{
		object-fit: cover;
		object-position: 30%;
		border-radius: 0 var(--Radius) var(--Radius) 0;
		width: 220px;
		min-height: 250px;
	}
	.Honorarkraft .Bild.fensterhoch
	, .Mitarbeiter .Bild.fensterhoch
	, .Geschaeftsstelle .Bild.fensterhoch
	, .Organisation .Bild.fensterhoch
	, .Vhs .Bild.fensterhoch
	, .Kontakt .Bild.fensterhoch {height: auto; max-width: 38.2%;}

	.Teaser.ProgrammbereichMitHintergrund a > div
	{
		max-width: var(--breite_layout);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.Veranstaltung.Teaser {flex-direction: row;}
	body.Hintergrund{
		padding-top: unset;
	}
}
@media only screen and (min-width: 1200px)
{
	/* ,.Programmbereich main > **/
	.ProgrammheftInhalt {width: var(--breite_layout);}
	.HintergrundContainer 	{display: block;}
}
@media only screen and (min-width: 1215px)
{
	.Kontakt.Detail {grid-column: span 12;}
	/* .WarenkorbGrid {flex-direction: row;} */
	.BereichInProgrammheft :is(.Text, .Veranstaltung) {flex-basis: 100%;}
	.BereichInProgrammheft :is(.h1, h1, nav) {margin-top: 90px;}


	body .Slider.Liste .fensterbreit {padding: calc(var(--Abstand)* 4) 0;}
	.Slider .SliderBar {flex-wrap: nowrap;}
	.SliderItem{padding: 0 200px;}
	.Slider :is(.SliderBackward,.SliderForward)
	{
		display: flex;
	}
	:root
	{
		--breite_layout: 1200px;
		--font-size: 20px;
	}
	#header {padding-top: var(--Abstand);}
	#barrierefreiheit_leiste {display: flex;}
	body.up .Sticky0 {position: sticky;}
	body.up main {padding-top: var(--heightHeader);}
	header {min-width: var(--breite_layout);}
	header.sticks.Sticky0
	{
		border-bottom: 1px solid var(--LinkColor);
		z-index: 1000;
		padding: 0;
	}
	header.sticks.Sticky0 #header 			{padding: var(--AbstandHalb);}
	header.sticks.Sticky0 #header 			{display: flex; justify-content: space-between;}
	header.sticks.Sticky0 #header_logo img, header.sticks.Sticky0 #header_logo_darkmode img {height: 100%; max-height: 2rem;}
	.sticks.Sticky0 .Benutzer a.eigenesBild img {height: 32px;}
	header.sticks.Sticky0 nav ul {display: flex;}
	header.sticks.Sticky0 nav a
	{
		padding: var(--AbstandHalb);
	}
	header.sticks.Sticky0 .WarenkorbAnzahl {position: relative; top: 0; right: 0;}
	header.sticks.Sticky0 #header nav#header_navi #MerkzettelSchnellansicht a
	{
		display: flex;
		flex-direction: row;
	}
	.Homepage header.sticks.Sticky0 nav	{flex-basis: initial;}
	header.sticks.Sticky0 #header_text
	, header.sticks.Sticky0 a div.label
	, header.sticks.Sticky0 .Zusatznavigation
	{
		display: none;
	}
	body > main {margin: auto; width: var(--breite_layout);}
	body.Hintergrund > main {padding: var(--Abstand);}
	.Benutzer a.eigenesBild img {height: 64px; aspect-ratio: 1;}
	.Benutzer a.eigenesBild {padding-bottom: 0; padding-right: 0;}
	body
	{
		gap: var(--Abstand);
	}
	body > *
	{
		padding: 0;
		z-index: 20;
	}
	.fensterbreit > .breite_12 	{flex-basis: 100%;}
	.fensterbreit > .breite_11 	{flex-basis: calc(87.5% - var(--Abstand));}
	.fensterbreit > .breite_10 	{flex-basis: calc(80% - var(--Abstand));}
	.fensterbreit > .breite_9 	{flex-basis: calc(75% - var(--Abstand));}
	.fensterbreit > .breite_8 	{flex-basis: calc(66.66% - var(--Abstand));}
	.fensterbreit > .breite_7 	{flex-basis: calc(61.8% - var(--Abstand));}
	.fensterbreit > .breite_6 	{flex-basis: calc(50% - var(--Abstand));}
	.fensterbreit > .breite_5 	{flex-basis: calc(38.2% - var(--Abstand));}
	.fensterbreit > .breite_4 	{flex-basis: calc(33.33% - var(--Abstand));}
	.fensterbreit > .breite_3 	{flex-basis: calc(25% - var(--Abstand));}
	.fensterbreit > .breite_2 	{flex-basis: calc(20% - var(--Abstand));}
	.fensterbreit > .breite_1 	{flex-basis: calc(12.5% - var(--Abstand));}
	.WarenkorbAnzahl
	{
		position: absolute;
		border-radius: 5px;
		background: red;
		color: white;
		padding: 2px 5px;
		top: var(--AbstandHalb);
		right: var(--AbstandHalb);
		font-weight: bold;
	}
	.Programmbereich .Bild img {border-radius: var(--Radius);}
	.Programmuebersicht
	, .Programm.Detail
	{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		display: flex;
		gap: var(--AbstandDoppelt);
	}
	.Programmuebersicht > .Programmbereiche
	, .Programm.Detail > .Programmbereiche
	{
		gap: var(--AbstandDoppelt);
	}
	.Hauptbereich ol {flex-direction: row;}
	#header
	, #footer {width: var(--breite_layout);}
	body {padding: 0;}
	#header
	{
		display: grid;
		align-items: center;
		justify-content: initial;
		gap: var(--Abstand);
		margin: auto;
		grid-template-columns: max-content auto max-content;
		padding-top: 15px;
	}
	#header nav ul {justify-content: end;}
	.ergebnis ul > li {flex-basis: 100%;}
	.ergebnis article.Inhalt
	{
		display: grid;
		grid-template-columns: 61.8% 38.2%;
		background: var(--Hintergrund);
		border-radius: var(--Radius);
		box-shadow: black 2px 0 3px -3px;
	}
	.ergebnis .Flex.Spalte + .Flex.Spalte {padding-top: var(--AbstandDoppelt);}
	.ergebnis article.Inhalt > figure {grid-column: 2/3; grid-row: 1/3;}
	.ergebnis article.Inhalt > figure img
	{
		width: 0;
		height: 100px;
		min-height: 100%;
		min-width: 100%;
		object-fit: contain;
		object-position: 100%;
		border-radius: 0;
	}
	.ergebnis article.Inhalt > h2
	{
		grid-column: 1/2;
		grid-row: 1/2;
		padding: var(--Abstand) var(--Abstand) 0 var(--Abstand);
	}
	.ergebnis article.Inhalt > p
	{
		grid-column: 1/2;
		grid-row: 2/3;
		padding: 0 var(--Abstand) var(--Abstand) var(--Abstand);
	}
	.ergebnis > * > * {flex-basis: 100%;}
	.Album {margin: 0;}
	#Orte ul
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.KontaktHauptgeschaeftstelleLinks ul
	{
		flex-direction: row;
	}
	/*StickyBeiAnmeldebuttons*/

	body.Veranstaltung > main {align-items: normal;}
	body.Veranstaltung > main > * {order: 3;}
	body.Veranstaltung > main > .Text:first-child {order: 1; grid-column: span 8;}
	body.Veranstaltung > main > .WebAnmeldung
	{
		order: 2;
		grid-column: span 4;
	}
	body.Veranstaltung > main > .WebAnmeldung > *
	{
		position: sticky;
		top: var(--Abstand);
	}
	.Veranstaltung.Teaser .Name
	{
		text-overflow: ellipsis;
		overflow: hidden;
	}
	article.Artikel.fensterbreit
	, .fensterbreit
	{
		display: flex;
		grid-column: span 12;
		/* justify-self: center; */
		margin-left: calc((100vw - var(--breite_layout)) / 2 * -1);
		margin-right: calc((100vw - var(--breite_layout)) / 2 * -1);
		justify-content: center;
		width: 100vw;
		flex-wrap: wrap;
	}
	article.Artikel.fensterbreit
	, .fensterbreit
	{
		padding: calc(var(--Abstand) * 4);
	}
	.ProgrammheftInhalt .ProgrammbereichMitHintergrund.Programmbereich.Teaser:not(.ArtikelContainer > .ProgrammbereichMitHintergrund.Programmbereich.Teaser)
	{
		margin: auto;
		max-width: calc(var(--breite_layout) / 100 * 62.8);
	}
	.Artikel.Teaser.standard img:not(.Grafik) {object-fit: cover; object-position: top; height: 250px;}
	/*ENDE StickyBeiAnmeldebuttons*/
}

/* Anmeldemaske sortieren und Suche optimieren*/
@media only screen and (max-width: 810px)
{
	#loginform > form > fieldset > div > label:nth-child(1) {order:1}
	#Benutzer {order:2}
	#loginform > form > fieldset > div > label:nth-child(2) {order:3}
	#Kennwort {order:4}
	#Anmelden {order:5}
	#loginform > form > fieldset > div > div:nth-child(7) {order: 6}
	#loginform > form > fieldset > div > a {order:7}
	#suche #erweitert li {overflow: initial; text-overflow: initial;}
}

/* Safari Query. Fix für Safari Probleme. */
@supports (hanging-punctuation: first) and (-webkit-appearance: none)
{
	.HintergrundFixed > div > div {background-attachment: scroll !important;} /* Ein seit Jahren bestehender Bug von Safari. Kann entfernt werden, wenn offiziell gelöst. */
	article > details {backdrop-filter: none;}
	*.AlbumListe img {opacity: 1 !important;}
}

/* Ende der CSS Datei. Hier drunter keine weiteren Selektoren und Regeln hinzufügen */