.Ampelbar {align-items: center;}
.anmeldungsliste {margin-bottom: var(--abstand);}
.MeineDaten {margin-bottom: var(--abstand);}
.Gesamtbetrag {margin-bottom: var(--abstand);}
#aside .Veranstaltung
, #aside .Programmbereich {margin-bottom: var(--abstand);}
#aside .Hauptbereiche .Programmbereich {margin-bottom: 0px;}
.hauptbereiche li:nth-child(odd) {margin-bottom: 0px !important;}

.Hauptbereiche li {display: flex; flex-basis: 50%;}
.Hauptbereiche {margin-bottom: -15px;}









/*
HTML
*/
* {box-sizing: border-box;}
body {font-size: 100%; font-family: arial, tahoma, helvetica; min-height: 1200px; padding-bottom: 500px;}
table, input {font-size: 1rem;}
td {vertical-align: top;}
h1 {padding: 0px; margin: -5px 0px 5px 0px; font-size: 1.250rem;}
h2 {padding: 0px; margin: 0px 0px 5px 0px; font-size: 1rem;}
h3 {margin: 0px 0px 5px 0px; font-size: 1rem; }
p
, ul
, ol {padding: 0px; margin: 0px;}
p
, h1
, h2
, h3 {-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
/* ul, ol {clear: both; list-style-type: none;} */
address {font-style: normal;}
cite {color: #888; display: block; white-space: normal;}
img {max-width: 100%; vertical-align: bottom;}
a:link
, a:focus
, a:hover
, a:active {color: #204B9E; text-decoration: none;}
a:hover {text-decoration: underline;}
figure {margin: 0px 0px var(--abstand) 0px;}

/*--------Formular-----------*/
fieldset {margin: 0px; padding: 0px; border-width: 0px;}
input {height: 26px;}
input[type=submit] {width: 100%; border: solid 1px #888;}
input[type=password] {margin-bottom: 5px;}
input[type=password]:last-child {margin-bottom: 0px;}
input[type=checkbox]
, input[type=radio] {margin: 0px; vertical-align: baseline; height: auto;}
label + input[type=radio] {margin-left: var(--abstand);}
input[type=text]
, input[type=date]
, input[type=number]
, input[type=time]
, input[type=email]
, input[type=url]
, input[type=password]
, textarea {border: solid 1px #888; padding: 2px; width: 100%;}
textarea {min-height: 100px;}
select {height: 26px; border: solid 1px #888;}
/*----lab/*----Facebook Like Button----*/
.facebookPanel {height: 25px;}faceel----*/
label {color: #666; display: block; text-align: right;}
label:after {content: ":";}
input + label:after {content: "";}
input + label {display: inline;}
input[type=radio] + label
, input[type=checkbox] + label {color: #000; content: ""; text-align: left;}

/*
Layout
*/

/*----wrapper----*/
.Internetauftritt #wrapper {overflow: visible;}

/*----Header----*/
#header {position: relative;}
#header_navi {position: relative; overflow: hidden; z-index: 3;}

/*----header_navi----*/
#header_navi ol {display: flex;}
#header_navi {line-height: 30px;}
#header_navi ol, #header_navi li {margin: 0px; padding: 0px; list-style-type: none;}
#header_navi a:link
, #header_navi a:visited
, #header_navi a:focus
, #header_navi a:hover
, #header_navi a:active {display: block; padding: 0px var(--abstand) 0px var(--abstand);}
#header_navi li:first-child a {border-width: 0px;}
#header_navi li:first-child {order: 10;}
#header_navi li:nth-child(4) {flex-grow: 1;}

/*----Headerbild und Text----*/
#header_bild {z-index: 2; background-repeat: no-repeat; position: absolute;}
#header_hintergrund	{z-index: 1; overflow: hidden; position: relative; background-repeat: repeat;}
#header_text {z-index: 3}
#header_logo {z-index: 3}

/*----Hauptinhalt----*/
#content {position: relative; padding: var(--abstand) var(--abstand) 0px var(--abstand);}
#contentbody {position: relative;}

/*----Aside----*/
#aside {position: relative; padding: var(--abstand) var(--abstand) 0px var(--abstand);}
#aside h1
, #aside h2 {margin: 0px -15px var(--abstand) -15px; padding: 5px 5px 5px var(--abstand); clear: both;}
#aside article {overflow: unset;}

/*----Flex----*/
.flex {display: flex;flex-wrap: wrap;justify-content: space-between;}
.Restbreite {flex-grow: 1;}
.Spaltenanzahl_2 > div {width: calc(50% - 7.5px);}
.Spaltenanzahl_2 figure.Teaser {min-width: 100%; padding-right: 0px;}
.Spaltenanzahl_3 > div {width: calc(33.333% - 10px);}
.Spaltenanzahl_3 p {display: none;}
.Spaltenanzahl_3 figure.Teaser {min-width: 100%; padding-right: 0px;}
.Spaltenanzahl_3 h2 {margin-top: 0px; text-align: center;}
.Restbreite + div {padding-left: 5px;}
div + .Restbreite {padding-right: 5px;}

/*----footer----*/
#footer {padding: 5px var(--abstand) 5px var(--abstand);}

/*----Tabelle standard----*/
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;}

/*
Klassen und ID
*/

/*----Abstand nach unten----*/
.margin_bottom {margin-bottom: var(--abstand);}

/*----Abstand nach oben----*/
.margin_top {margin-top: var(--abstand);}

/*----deaktiviert----*/
.deaktiviert {filter: grayscale(1); opacity: 0.65;}

/*----textright----*/
.textright {text-align: right;}

/*----Button----*/
.button {margin: 0 0 5px 0;}

/*----Paragraph----*/
div.paragraph {margin-top: -3px; text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
.redbox {background-color: #fdd; border-radius: 6px; padding: var(--abstand) var(--abstand) var(--abstand) var(--abstand); margin: 0px 0px var(--abstand) 0px; white-space: normal; display: block;}
div.paragraph ul {padding-left: var(--abstand);}

/*----Teaser----*/
figure.Teaser {width: calc(33.333% + 5px); padding-right: var(--abstand);}

/*----Farben----*/
.grey {color: grey;}
.red {color: #880000;}
.green {color: #008800;}

/*----Tabelle struct----*/
.struct {border-collapse: collapse;}
.struct td {padding: 0px;}

/*----Formular----*/
.form .flex > div
, form .flex > div {padding-bottom: 5px;}

/*----icon----*/
img.icon {min-width: none; max-width: none; width: auto; float: none; margin: 0; vertical-align: baseline;}

/*
cmx-Elemente
*/
/*----dbvarchar----*/
.cmx_dbchar {background-color: white; border: 1px solid #888888; padding: 1px 1px 1px 3px; display: block;}

/*----passwortSecuritybar----*/
#passwortSecuritybar {padding: 5px; display: none; margin-top: 5px; border-radius: 3px;}
#passwort::-webkit-input-placeholder, #passwortverifizierung::-webkit-input-placeholder {opacity: 0;}	/* WebKit browsers */
#passwort:-moz-placeholder, #passwortverifizierung:-moz-placeholder {opacity: 0;}	/* Mozilla Firefox 4 to 18 */
#passwort::-moz-placeholder, #passwortverifizierung::-moz-placeholder {opacity: 0;}	/* Mozilla Firefox 19+ */
#passwort:-ms-input-placeholder, #passwortverifizierung:-ms-input-placeholder {opacity: 0;}	/* Internet Explorer 10+ */
#passwort::placeholder, #passwortverifizierung::placeholder {opacity: 0;}

/*
Apps
*/
/*----Hauptgeschäftsstelle----*/
.KontaktHauptgeschaeftstelleLinks>a {display: block; margin-bottom: var(--abstand);}

/*----Suche----*/
#suchparameter>div>p {margin-bottom: 5px;}
.suchparameter .flex>div {border: solid 1px #888;}
.suchparameter .suchparameter_head {padding: 5px var(--abstand); display: block; text-decoration: none; color: #000;}
.suchparameter .suchparameter_option {border: solid 1px #888; padding: 5px var(--abstand); background: #F0F0F0; margin-left: 5px;}
.suchparameter .suchparameter_option a {text-decoration: none; color: #000;}
.suchparameter .filterEntfernen {padding: 0 var(--abstand);}
.suchparameter .suchparameter_content {padding: 5px var(--abstand) 0 var(--abstand);}
.suchparameter_content ul {padding: 5px 0 5px 30px;}

.panelSucheErweitert ul {list-style: none;}

/*----loginform----*/
#loginform label {text-align: left;}

/*----Tagcloud----*/
.Wortwolke {overflow: hidden;}

/*----Zufallskurse----*/
.Zufallskurse .flex>div:nth-child(1) {width: auto; margin-right: 5px;}
.Zufallskurse .flex>div:nth-child(2) {flex-grow: 1;}

/*----Hauptbereich----*/
.Hauptbereiche ol {display: flex; flex-wrap: wrap;}
.Hauptbereiche li:nth-child(odd) img {margin: 0 var(--abstand) 0 0;}
.Hauptbereiche li:nth-child(even) img {order: 2; margin: 0 0 0 var(--abstand);}
.Hauptbereiche li:nth-child(even) div {flex-grow: 1; text-align: right;}
.Hauptbereiche li img {width: 38px; height: 38px;}

/*----Webanmeldung----*/
#Anmeldung ul
, #Anmeldung ol {padding: 0px; margin: 0px; list-style: none;}
#Anmeldung .VeranstaltungTeaser {background: #D4D7E3;}
.Anmeldepanel {background: #E6E6EE;}
.teilnahme {padding: 0px var(--abstand) 0px var(--abstand); border-bottom: 1px solid #fff; margin-bottom: var(--abstand);}
.teilnahme>div>div:first-child {width: 38.2%}
.teilnahme label:after {content: "";}
.teilnahme label {text-align: left;}
.addTeilnehmer {padding: 0px var(--abstand) var(--abstand) var(--abstand);}
.TeilnehmerAuswahl + h1 {margin-top: var(--abstand);}
.MeineVeranstaltungen h2 {font-weight: bold;}
.flex.einkauf-anmeldung>div {margin-bottom: 0;}

.anmeldungAbschicken a {display: table; border: solid 1px #888; background: #E6E6EE; padding: var(--abstand);}

/*----Merkzettel----*/
.Merkzettel .standard {margin-bottom: 5px;}
.merken input[type="checkbox"] {margin: 14px 0px 0px var(--abstand);}
.merken {background: #E6E6EE;}
.merken .margin_bottom {margin-bottom: 0px;}
.meldung { font-size: 0.95em; padding: var(--abstand) 0; }
.meldung p { margin-bottom: 5px; }
.meldung p:last-child { margin-bottom: 0; }
.info a { color: #004000;}
.info {color: #008000; }
.warn a {color: #402800;}
.warn {color: #805600;}

.va-entfernen { margin-bottom: 30px; background-color: #D4D7E3; padding: 10px var(--abstand) 10px 0;}
/*
Webdokumente
*/
/*----Homepage-----*/
#Homepage>article:first-child>a:first-child>img.big
, #Homepage>a:first-child>img.big {margin: -15px -15px var(--abstand) -15px; width: calc(100% + 30px); max-width: calc(100% + 30px);}
#Homepage figure.BildTeaser {float: left;}

/*
Objekte
*/
/*----Album----*/
.Album {clear: both;}
.AlbumListe {display: flex; flex-direction: column; align-items: center;}

/*----Veranstaltung----*/
#Veranstaltung>a>img {float: left; clear: both; margin: 0px 5px 0px 0px;}
#Veranstaltung h1 {margin-top: 0px;}

/*----VeranstaltungTeaser----*/
.VeranstaltungTeaser {padding: 10px var(--abstand) 10px var(--abstand) !IMPORTANT; background-color: #E6E6EE; justify-content: space-between; flex-wrap: wrap;}
.VeranstaltungTeaser .Nummer {flex-grow: 1;}
.VeranstaltungTeaser .Titel {flex: none; flex-grow: none; margin-right: 0px; width: 100%;}
.VeranstaltungTeaser .Zeit {flex: 3;}
.VeranstaltungTeaser .Ort {flex: 4;}
.VeranstaltungTeaser .Name {width: 100%; padding-right: var(--abstand);}
.VeranstaltungTeaser .Untertitel {padding-right: var(--abstand);}
.VeranstaltungTeaser .Nummer {padding-right: var(--abstand);}
.VeranstaltungTeaser .Ampelanzeige {flex: 1; text-align: right;}
.VeranstaltungTeaser .Veranstaltung {justify-content: flex-start;}
.VeranstaltungTeaser>div {margin-right: var(--abstand);}
.VeranstaltungTeaser>div:last-child {margin-right: 0px;}
.VeranstaltungTeaser .Ampel .icon {width: 17px; height: 12px;}

/*----VeranstaltungLink----*/

/*----Programmbereich----*/
.Programmbereich>h1 {display: flex; align-items: center; margin-bottom: var(--abstand);}
.Programmbereich>h1>img {margin-right: var(--abstand);}

/*----ProgrammbereichTeaser----*/

/*----ProgrammbereichLink----*/

/*----Artikel----*/
article {clear: both;}
article figure.BildTeaser {float: left;}

/*----ArtikelTeaser----*/
.ArtikelTeaser {clear: both; overflow: hidden; /*overflow: hidden; war schon mal auskommentiert*/}
#aside .ArtikelTeaser {overflow: visible;}
.ArtikelTeaser figure.Teaser {margin-bottom: 0;}

/*----Liste----*/
/*----ListeTeaser----*/
.ListeTeaser {clear: both;}

/*----Bild----*/
#asidecontent>*:first-child>img.big
, #asidecontent>*:first-child>a>img.big {margin: -15px -15px var(--abstand) -15px; width: calc(100% + 30px); max-width: calc(100% + 30px);}
img.big {max-width: 100%; vertical-align: bottom;}

/*----Inhaltsverzeichnis----*/
.Inhaltsverzeichnis ul {padding-left: var(--abstand);}

/*----BildTeaser----*/
.BildTeaser {clear: both;}

/*----Kontakt----*/

/*----KontaktTeaser----*/
.KontaktTeaser {justify-content: flex-start; margin-bottom: var(--abstand);}
.KontaktTeaser > div:first-child {/* width: 33.333%; */padding-right: var(--abstand);flex-grow: 1;flex-basis: 33%;}
.KontaktTeaser > div:nth-child(2) {/* width: 66.666%; *//* flex-grow: 2; */flex-basis: 66%;}
.KontaktTeaser img {max-width: 100%;}
.KontaktTeaser .flex {justify-content: normal;}

/*----KontaktLink----*/
a.Kontakt {display: block;}

/*----Termin----*/
.Termine {display: none; margin-top: 5px;}

/*----Kurspusher - Last-Minute-Kurse----*/
.Kurspusher .VeranstaltungTeaser {background: none; flex-wrap: wrap;}

/*----Karte----*/
.Karte .Kartenpunkt::after {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 50%; content: "";}
.Karte .Kartenpunkt:hover {background: #002C5B;}
.Karte .Kartenpunkt:hover:after {
-webkit-animation: SonarEffekt 1.3s ease-out 50ms;
-moz-animation: SonarEffekt 1.3s ease-out 50ms;
animation: SonarEffekt 1.3s ease-out 50ms;
}
@-webkit-keyframes SonarEffekt {
0% {opacity: 0;}
20% {opacity: 0.8; box-shadow: 0 0 0 2px rgba(18, 65, 102, 0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(18, 65, 102, 0.5);}
100% {opacity: 0; box-shadow: 0 0 0 2px rgba(18, 65, 102, 0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(18, 65, 102, 0.5); -webkit-transform: scale(1.5);}
}
@-moz-keyframes SonarEffekt {
0% {opacity: 0;}
20% {opacity: 0.8; box-shadow: 0 0 0 2px rgba(18, 65, 102, 0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(18, 65, 102, 0.5);}
100% {opacity: 0; box-shadow: 0 0 0 2px rgba(18, 65, 102, 0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(18, 65, 102, 0.5); -moz-transform: scale(1.5);}
}
@keyframes SonarEffekt {
0% {opacity: 0;}
20% {opacity: 0.8; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(255,255,255,0.5);}
100% {opacity: 0; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #002C5B, 0 0 0 10px rgba(255,255,255,0.5); transform: scale(1.5);}
}
.Kartenpunkt {width: 6px; height: 6px; border-radius: 50% !important; background: #002C5B;
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}

/*----Kommentar----*/
.kommentare {display: table; min-width: 30%; margin: 5px 0px 5px 0px; border-radius: 3px;}
.kommentar {padding: 5px; border-bottom: solid 1px #dbe5ee; overflow: hidden; position: relative;}
.kommentar .delete {float: right; margin: 0px 0px 3px 3px; font-weight: bold; text-decoration: none; color: #dbe5ee;}
.kommentar .delete:hover {color: #222;}
.kommentarcontrolpanel {padding: 5px 7px 5px 5px;}
.kommentar p {display: inline;}

/*
Mediaqueries
*/
@media print
{
#aside, #header {display: none;}
#contentbackground, #main {width: auto;}
#wrapper {max-width: none;}
.WebSuche form, .WebSuche input {display: none;}
#contentbackground {width: 100% !important;}
#main {width: 100% !important;}
#wrapper {width: 100% !important;}
#content {border-width: 0px !important;}
}

@media only screen and (max-width: 1023px) {
body {margin: 0px; background: #fff;}
#wrapper {flex-direction: column;}
#main
, #aside {width: 100% !important;}
#footer {display: none;}
}

@media only screen and (max-width: 640px) {
#header_navi ol {flex-wrap: wrap;}
#header_navi li {width: 50%;}
#header_navi li>a {padding: 10px var(--abstand) !important;}
#header_navi a:link {border-right: 0 !important;}
}

@media only screen and (max-width: 598px) {
.Wunschpasswort {display:none;}
#passwort::-webkit-input-placeholder, #passwortverifizierung::-webkit-input-placeholder {opacity: 1; color: grey}	/* WebKit browsers */
#passwort:-moz-placeholder, #passwortverifizierung:-moz-placeholder {opacity: 1; color: grey}	/* Mozilla Firefox 4 to 18 */
#passwort::-moz-placeholder, #passwortverifizierung::-moz-placeholder {opacity: 1; color: grey}	/* Mozilla Firefox 19+ */
#passwort:-ms-input-placeholder, #passwortverifizierung:-ms-input-placeholder {opacity: 1; color: grey}	/* Internet Explorer 10+ */
#passwort::placeholder, #passwortverifizierung::placeholder {opacity: 1; color: grey}
#header_text {left: var(--abstand) !important; font-size: 1.750rem !important;}
#header_hintergrund {height: 95px !important;}
.Spaltenanzahl_2
, .Spaltenanzahl_3 {flex-direction: column;}
.Spaltenanzahl_2>div
, .Spaltenanzahl_3>div {width: 100%;}
.Spaltenanzahl_2 label
, .Spaltenanzahl_3 label {text-align: left;}
.Spaltenanzahl_2 select
, .Spaltenanzahl_3 select {width: 50%;}
.Restbreite + div
, div + .Restbreite {padding: 0;}
img.Teaser
, .Teaser img {max-width: 100% !important;}
.VeranstaltungTeaser>div:first-child {width: 100%;}
.VeranstaltungTeaser>div:nth-child(2) {flex-grow: 1; text-align: right;}
.teilnahme>.flex>div:first-child {width: 100%;}
#suchbox {margin-bottom: 5px;}
.Login .Spaltenanzahl_3>div:nth-child(2) {order: 1;}
.Login .Spaltenanzahl_3>div:nth-child(n+5) {order: 2;}
}

@media only screen and (max-width: 480px) {
#header_navi li:nth-child(even) {width: 38.2%;}
#header_navi li:nth-child(odd) {width: 61.8%;}
.Hauptbereiche ol {flex-direction: column; align-items: flex-start;}
.Hauptbereiche li {flex-basis: 100%;}
.Hauptbereiche li div {text-align: left !important;}
.Hauptbereiche li:nth-child(2n) img {order: 0; margin: 0 var(--abstand) 0 0;}
.Spaltenanzahl_2 > div {width: 100% !important;}
.Spaltenanzahl_3 > div {width: 100% !important;}
}

@media only screen and (max-width: 320px) {
#header_navi ol {flex-direction: column;}
#header_navi li {width: 100%;}
}





/* -------------- Bild ->> später figure -------------- */
#Quellenangaben img {clear: none;}
.Quellenangaben_Item {clear: both; overflow: hidden;}

/*---------------------------------------------------------------------------------------------------------
Disposition
*/
/* -------------- Album -------------- */
.preview_2, .preview_3, .preview_4 {
position: absolute; left: 5px; opacity: 0; background-color: #fff;
transition: all 0.3s ease-out;
}
.albumpreview:hover .preview_2 {left: 68px; opacity: 1; box-shadow: #fff 1px 1px 3px 1px;}
.albumpreview:hover .preview_3 {left: 136px; opacity: 1; box-shadow: #fff 1px 1px 3px 1px;}
.albumpreview:hover .preview_4 {left: 204px; opacity: 1; box-shadow: #fff 1px 1px 3px 1px;}
.albumpreview {position: relative;}


/*---------------------------------------------------------------------------------------------------------
BEGINN zu besprechen
*/
.KontaktHauptgeschaeftstelle address a {display: block; margin-bottom: var(--abstand);}

/*----Facebook Like Button----*/
.facebookPanel {height: 25px;}

.Zufallskurse .flex {flex-wrap: nowrap;}

.KontaktTeaser {flex-wrap: nowrap; margin-bottom: var(--abstand);}

/*---------------------------------------------------------------------------------------------------------
ENDE zu besprechen
*/

/*----edit----*/
.editList {pointer-events: initial; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
.editList>* {pointer-events: none;}
.edit {pointer-events: initial; position: relative;}
.edit>* {pointer-events: none;}

.unfokussiert {filter: grayscale(1); opacity: 0.3;}

.verschwinde {filter: grayscale(1); opacity: 0.3; transition: all 1s ease;}
.erscheine {transition: opacity 1s ease;}
.body {position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; z-index: 1; opacity: 1 !important;}
.Internetauftritt {position: relative; z-index: 2; cursor: pointer;}
.overlay {background: rgba(48, 105, 177, 0) !important; z-index: 10000000;
position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;
pointer-events: initial;}
#overlayLandingArea {display: none;}
.markiert {border: dashed 2px red; margin: -7px; padding: 5px; z-index: 10000000; background: rgba(255, 255, 255, 0.8);
box-shadow: #fff 0px 0px 10px 5px;}
.cmx_dbrichtext
, .htmleditor {pointer-events: initial;}
.textEdit {pointer-events: initial; -moz-user-select: all; user-select: all; cursor: text;}

/* -------------- Bild ->> später figure -------------- */
#Quellenangaben img {clear: none;}
.Quellenangaben_Item {clear: both; overflow: hidden;}















/*---------------------------------------------------------------------------------------------------------
WebRTC
*/

.KonversationVorschau{position: relative; filter: blur(1px); cursor: pointer; box-shadow: #000 0px 0px 1px 0px; padding: var(--abstand); padding-left: 20px;}
.KonversationVorschau:after {
content: " "; z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.8);

}
.KonversationVorschau .Chatbox{display: none;}
.KonversationAnruf{display: none;}
.Konversationsreferenzdetail{display: none;}
.KonversationVorschau .Videobox{width: 112px;}
.KonversationVorschau .EigenesVideo{display: none;}

.Notificationarea {position: fixed; bottom: -0.1vh; right: 12vw; z-index: 4999; display: flex; align-items: flex-end;}
.chat {margin-right: var(--abstand); box-shadow: 0px 0px 25px 10px #fff; max-width: 320px;}
.chat .head {margin-bottom: 1px; flex-wrap: nowrap;}
.chat .images {cursor: pointer; user-select: none; -moz-user-select: none; margin-right: 0px;}
/* .chat .ungeseheneNachrichten {background: rgba(255, 255, 255, 0.8)} */

.chatOffen {max-width: 320px;}
.chatOffen .images img {background: #fff;}
.chatGeschlossen .images img {filter: grayscale(1); background: #eee;}

.chatbox {min-height: 100px; max-height: 250px; overflow: auto;
overflow-x: hidden; background: #eee; padding: 4px 5px var(--abstand) 5px;}
.chatbox .message {display: flex; margin-top: 1px; background: #fff; padding: 5px;}
.chatbox .message img {width: 32px; vertical-align: bottom; box-shadow: rgb(78, 95, 97) 0px 0px 1px 0px;}
.chatbox .message .p {flex-grow: 1;}
.chatbox .message .time {color: gray; font-size: 0.7rem; margin-left: 5px;}
.chatbox .emoji {font-size: 2rem;}
.chatbox .own  {margin-left: 42px;}
.chatbox .own .img {order: 2; margin-left: 5px;}
.chatbox .own .time {margin-right: 5px;}
.chatbox .foreign  {margin-right: 42px;}
.chatbox .foreign .img {margin-right: 9px;}


.chatbox .foreign + .own {margin-top: 5px;}
.chatbox .own + .foreign {margin-top: 5px;}

.chatbox>div:last-child {margin-bottom: 5px;}

.ChatInputBox {width: 100%; border-width: 1px 0px 0px 0px; padding: 5px; box-sizing: border-box;}

.chatbox .day {padding-top: var(--abstand); padding-bottom: var(--abstand); color: grey; text-align: center;}

.KonversationAuswahl {margin-right: var(--abstand); box-shadow: 0px 0px 2px 0px rgb(51, 51, 51); margin-bottom: var(--abstand); padding: var(--abstand); background: white;}
.KonversationAuswahl .KonversationAuswahlItem {margin-bottom: var(--abstand);}
.KonversationAuswahlItem {cursor: pointer; filter: grayscale(1);}
.KonversationAuswahlItem:hover{filter: none; transition: filter 1s ease;}
.KonversationAuswahlItem img {-moz-user-select: none;user-select: none;}

.Videobox {background-color: rgb(78, 95, 97); color: white; padding: 5px;
display: flex; flex-direction: column; box-shadow: 0px 0px 2px 0px; flex-grow: 1;
}
.flex > div.Videobox {margin: 0px var(--abstand) var(--abstand) 0px;}
div.Videobox video {height: 135px;}
video[poster]{max-width: 100%; max-height: 80%;}

.RegistrierungGrid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 0.2rem;
}
.WarenkorbGrid {
	display: grid;
	grid-template-columns: auto 120px;
}
@media screen and (max-width: 598px) {
	.RegistrierungGrid, .WarenkorbGrid {
		grid-template-columns: 1fr;
	}
}