/* @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(--darker);
	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(--abstand_halb);}
header
, main
, footer
, nav
{
	grid-column: 1 / 4;
}
main
, footer
, article.Artikel
, .Liste
, .Albumvorschau
, .ArtikelContainer
, main > .Programm
, .editList
, .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.flexcolumn {display: flex; align-items: normal;}
body.up .sticky0 {display: block}
#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(--abstand_halb);
	padding: var(--abstand_halb);
	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(--abstand_halb);
	left: var(--abstand_halb);
	right: var(--abstand_halb);
	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;
}
.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(--link_color);
	text-decoration: none;
}
a
, a:link
, a:active
, a:visited
{
	display: block;
	color: var(--link_color);
	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;}
/*.Text.Detail {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 {/*text-align: center;*/ font-size: 1.5rem;}
.Veranstaltung h1 {text-align: left;}
h2 {font-size: 1rem;}
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: auto; margin: 0 5px 0 0; vertical-align: baseline;}
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(--link_color);
	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(--abstand_doppelt);
	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;}

Video {height: 100%; width: 100%; box-shadow: var(--shadow);}
.Video.vorschau.hintergrund {background-size: cover;}
.Video.vorschau {aspect-ratio: 16/9;}
.Video.vorschau .zwei-klick-meldung {
	flex-wrap: nowrap;
	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);
}
.Video.vorschau iframe {position: absolute; top: 0; left: 0; bottom: 0; right: 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-height: 80vh; max-width: 100%; display: block;}
img.Dokument
, img.Logo
, img.Grafik 			{border: #bbb 1px solid;}
img.big 				{margin: auto;}
/*.Bild.breite_12 figure {width: min-content;}*/
figcaption
{
	background: #f5f5f5;
	padding: var(--abstand);
	border-radius: 0 0 var(--radius) var(--radius);
	font-size: 0.5rem;
	margin-top: calc(var(--abstand) * -1);
}

article img 			{border-radius: var(--radius_halb);}
article img.icon 		{border-radius: 0;}
article.inhalt h2 	{grid-column: span 12; flex-basis: 100%;}
article.inhalt 		{/*flex: 1;*/ display: flex; flex-direction: column; gap: var(--abstand);}
article > details
{
	transition: background .5s;
	flex: 1;
	background: var(--hintergrund);
	backdrop-filter: var(--backdrop_blur);
	border-radius: var(--radius);
	grid-column: span 12;
}
article > details[open] {transition: background .5s ease-out; background: var(--darker);}
.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);
}
.Artikel.Hintergrund:not(body)
{
	display: flex;
	gap: var(--abstand);
	overflow: hidden;
}
.positioniert.Hintergrund:not(.fensterbreit)
, .Hintergrund.Veranstaltung:not(.fensterbreit,body) {padding: var(--abstand_doppelt); border-radius: var(--radius); overflow: hidden;}
.Hintergrund.Veranstaltung {min-height: 500px; align-items: end;}
.positioniert.Hintergrund:not(.fensterbreit) > .Inhalt
{
	border-radius: var(--radius_halb);
	box-shadow: var(--hintergrundschatten);
}
main > * {z-index: 20;}
main > .fensterbreit {z-index: 10;}
/* .buttonVonRechts {animation: animationslideRight .7s;} */
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;
}
.Honorarvetraege {padding: var(--abstand);}
.Brotkrumennavigation {display: flex; flex-direction: column; gap: var(--abstand); grid-column: span 12;}
.Errorbox > div {padding: var(--abstand_halb);}
.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);
}
.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 .Name {flex: 1;}
.Veranstaltung.begonnen.Teaser :is(
	.Thumbnail,
	.Untertitel,
	.Zeit,
	.Inhalt .Ort,
	.Ampelanzeige,
	.neu_teaser,
	.merkenInTeaser,
	.Nummer
){
	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.beeendet .Inhalt {align-items: initial;}
.Veranstaltung.beendet.Teaser .Titel::after {content: "beendet";}
.WarenkorbGrid .Veranstaltung.Teaser .Inhalt {background: var(--hintergrund_auf_hintergrund);}
.breite_5 .Veranstaltung.Teaser .Inhalt
, .Veranstaltung.Teaser .Inhalt
, .Veranstaltung.Teaser .Inhalt
{
	flex-direction: column;
}
/* .merkenInTeaser .button {background: none;}
.merkenInTeaser .button svg {color: var(--link_color);} */
.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(--abstand_halb);
	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;
	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;}
.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;}
.Hintergrund:not(.Abbinder) > *: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, .cookiebanner, figure, .SliderBackward, .SliderBar, .SliderForward, .SliderItem)
{
	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 {min-height: 90vh;} */
/* .Journaleintrag:first-child {min-height: 0;} */
.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;
}
.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);}
.JournalVorschau {border-radius: var(--radius);}
.JournalVorschauliste .Journaleintrag img
{
	height: 200px;
}
.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(--abstand_doppelt) 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;
}
.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(--hintergrundschatten);
	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;
	width: calc(100vw + var(--abstand));
	flex-wrap: wrap;
	padding: calc(var(--abstand_doppelt) * 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(--abstand_halb);}
.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 {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	outline: 1px solid #e5dede;
}
.Artikel.Teaser .Inhalt {background: white;}
a.Artikel.Teaser
, .Applikationsreferenz.Hintergrund {display: flex; align-self: normal;}



.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;}
/*
main > .Bild.Detail {transition: 1s;}
main > .Bild.breite_12.Detail.fensterbreit.viewportInnen
, main > .Bild.breite_0.Detail.fensterbreit.viewportInnen {background: black; transition: 1s;}
main > .Bild.breite_12.Detail.fensterbreit
, main > .Bild.breite_0.Detail.fensterbreit:not(.Hintergrund) {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	height: 150vh;
	margin-top: calc(var(--abstand) * -1);
	margin-bottom: calc(var(--abstand) * -1);
}
.Bild.breite_12.Detail.fensterbreit figure
, .Bild.breite_0.fensterbreit figure {
	display: flex;
	align-items: center;
	position: sticky;
	top: 0;
	height: 100vh;
}
*/
body.Ort h1 a.extern {display: block;}
.Honorarkraft .Bild.fensterbreit
, .Mitarbeiter .Bild.fensterbreit
, .Geschaeftsstelle .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
{
	border-radius: var(--radius);
}
.Mitarbeiter .Kopf .Bild img
, .Honorarkraft .Kopf .Bild img
, .Geschaeftsstelle .Kopf .Bild img
{
	max-height: 50vh;
	border-radius: 15px 15px 0 0 ;
}
.Mitarbeiter .Kopf h1
, .Honorarkraft .Kopf h1
, .Geschaeftsstelle .Kopf h1
{
	text-align: center;
}
.Logo {background: white; padding: var(--abstand); border-radius: var(--radius);}
.fensterhoch > * {flex-basis: auto;}
.ArtikelContainer .fensterhoch {height: auto;}
/* .Veranstaltung main {max-width: var(--lesebreite);} */
.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(--backdrop_blur);
	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(--abstand_halb);
}
#barrierefreiheit_leiste svg {height: 32px; padding-right: var(--abstand_halb);}
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(--darker);
	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(--abstand_halb);}
.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);
}
.Facebook-Likebutton {grid-column: 1 / 4;}
.breite_0.Applikationsreferenz > h2
, .breite_12.Applikationsreferenz > h2 {padding-top: calc(var(--abstand_doppelt) * 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;
}
.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(--abstand_halb);}
.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(--button_color);
	background: var(--button_hintergrund);
	flex: 1;
	text-align: center;
	border-radius: var(--radius);
	border: none;
}
a.button:link 		{color: var(--button_color); 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(--weiss_transparent);
	backdrop-filter: var(--backdrop_blur);
}
.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}
.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 {display: none; grid-column: span 2;}
.Suche #erweitert li {flex: 1; white-space: nowrap;}
.Suche #erweitert > *
{
	background: var(--hintergrund);
	backdrop-filter: var(--backdrop_blur);
	padding: var(--abstand);
	border-radius: var(--radius);
}
.Suche #erweitert > .Orte
{
	padding: 0;
}
.Suche #erweitert>details[open] {flex-basis: 100%;}
body.Suche #erweitert
, .Artikel .Suche #erweitert
{
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--abstand);
}
.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;
	gap: var(--abstand_halb);
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.Albumvorschau figcaption
{
	display: none;
}
.Albumvorschau img
{
	transition: .3s ease;
	width: 100%;
	max-width: none;
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}
.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(--brighter);}
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;}
.Album .close {display: none;}
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;}
.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(--backdrop_blur);
	padding: var(--abstand_doppelt);
	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(--abstand_doppelt);}
.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;}
.cookiebanner
{
	display: flex;
	flex-direction: column;
	gap: var(--abstand);
	position: fixed;
	left: 0;
	bottom: 0;
	right: auto;
	max-width: 100vw;
	max-height: 100vh;
	background: #000d;
	backdrop-filter: var(--backdrop_blur);
	padding: var(--abstand);
	justify-content: start;
	z-index: 9999999;
	display: none;
	color: white;
	flex-wrap: wrap;
	justify-content: flex-start;
	border-radius: 0;
	box-shadow: none;
}
.cookiebanner * {flex: 1;}
.cookiebutton button
{
	font-size: 1rem;
	padding: 10px 30px 10px 30px;
	font-weight: normal;
	cursor: pointer;
	border:none;
	color:white;
	font-weight: bold;
	border-radius: var(--radius_halb);
}
.cookiebutton.accept button {background: rgb(33, 117, 36);}
.cookiebutton.deny button {background: rgb(178, 52, 52);}
.cookiebanner.show {display: flex;}
.cookiebanner .buttoncontainer {display: flex; flex-direction: column; gap: var(--abstand);}
.cookiebanner .buttoncontainer > div {flex: 1;}
.cookiedslink {flex-grow: 0;}
.cookiedslink>a {color:#afcade !important;}
.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: span 12; justify-self: normal;}
.Channels > div {display: flex; flex-direction: column; gap: var(--abstand);}
.Channelliste {display: flex; flex-direction: column; gap: var(--abstand);}
.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_center 	{justify-content: center !important; justify-items: center !important;}
.justify_end 		{justify-content: end !important; justify-items: end !important;}
.Text.justify_center {margin: auto;}

.Veranstaltung.align_items_start .Inhalt {position: sticky; top: var(--abstand_doppelt);}
.Veranstaltung.align_items_end:not(.Abbinder) .Inhalt {position: sticky; bottom: var(--abstand_doppelt);}
.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(--darker);
	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(--darker); 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(--darker); 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(--abstand_halb);
	padding: var(--abstand);
}
.Veranstaltung.Teaser .Grafik {object-fit: initial; align-self: center;}
.VeranstaltungTeaserInhalt h2 {font-size: 1rem;}
.merkenInTeaser {padding: var(--abstand);}
.Fehler404 {grid-column: span 12;}
#weitermeldungen > div {display: flex; flex-direction: column; gap: var(--abstand);}
@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)
{
	.VeranstaltungTeaserInhalt
	{
		padding: var(--abstand) 0 var(--abstand) var(--abstand);
	}
	.BereichInProgrammheft ul {gap: var(--abstand);}
	.Veranstaltung.Teaser {flex-direction: row;}
	.begonnen .merkenInTeaser {display: none;}
	.begonnen .Titel {font-weight: normal;}
	.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(--darker); 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(--abstand_doppelt) * -1);
		margin-right: calc(var(--abstand_doppelt) * -1);
		margin-bottom: calc(var(--abstand_doppelt) * -1);
	}
	body.Hintergrund main {margin: auto;}
	.Homepage header .Startseite
	, .Homepage header .Suche
	{
		display: block;
	}
	.Artikel .Suche #erweitert, body.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, body.Suche #suchformular fieldset {display: flex}
	.Artikel .Suche #suchbox, body.Suche #suchbox {flex-basis: 100%;}
	.Artikel .Suche #suchbutton, body.Suche #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(--darker);}
	.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(--darker);
	}
	.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(--abstand_halb);}
	.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(--weiss_transparent);
	}
	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(--darker);}
	.page_addition_first_page {margin-top: -.5cm;}
	.Veranstaltung figure:has(figcaption) img {border-radius: var(--radius) var(--radius) 0 0;}
	.Veranstaltung figure img {border-radius: var(--radius);}
	.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);
	}
	.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(--brighter);}
	.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(--abstand_doppelt);
	}
	.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(--abstand_doppelt);
	}
	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 > div {padding: 10vh 0;}
	.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 {margin-bottom: calc(var(--abstand) * 4);}
	.Honorarkraft
	, .Honorarkraft .Kopf
	, .Mitarbeiter
	, .Mitarbeiter .Kopf
	, .Geschaeftsstelle
	, .Geschaeftsstelle .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;}
	.Album main {width: auto; max-width: none; margin: 0;}
	.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(--weiss_transparent);
		padding: var(--abstand);
		backdrop-filter: var(--backdrop_blur);
		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(--abstand_halb);
	}
	#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;
	}
	.cookiebanner
	{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		right: auto;
	}
	.cookiebanner .buttoncontainer {flex-direction: row;}
	.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
	, .Kontakt .Bild.fensterhoch {height: auto; max-width: 38.2%;}

	.Teaser.ProgrammbereichMitHintergrund a > div
	{
		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);}
}
@media only screen and (min-width: 1215px)
{
	/* .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(--link_color);
		z-index: 1000;
		padding: 0;
	}
	header.sticks.sticky0 #header 			{padding: var(--abstand_halb);}
	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(--abstand_halb);
	}
	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(--abstand_halb);
		right: var(--abstand_halb);
		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(--abstand_doppelt);
	}
	.Programmuebersicht > .Programmbereiche
	, .Programm.Detail > .Programmbereiche
	{
		gap: calc(var(--abstand_doppelt));
	}
	.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 .flexcolumn + .flexcolumn {padding-top: var(--abstand_doppelt);}
	.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*/
	/*ViewportZoom*/
	/* .fensterbreit {overflow: hidden;}
	.viewport .HintergrundContainer
	{
		transform: scale(1);
		transition: 2.5s;
	}
	.HintergrundContainer
	{
		transform: scale(1.05);
		transition: 2.5s;
	}*/
	/*ENDE ViewportZoom*/
}

/* 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;}
}
.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(--abstand_doppelt);
}
.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;
}

/* Fix für Safari. Safari hat seit Jahren ein Bug mit der background-attachment property */
@supports (hanging-punctuation: first) and (-webkit-appearance: none)
{
	.HintergrundFixed > div > div {background-attachment: scroll !important;}
	article > details {backdrop-filter: none;}
}