@charset "UTF-8";
xarticle {background-image:none;}
/*-------------------------------------------------------------------------------------------*/ 
/* Text rechts um Bild oder Video laufen lassen                                              */
/*-------------------------------------------------------------------------------------------*/
.medien-flow-root-inline-block {display:inline-block;box-sizing:border-box;width:100%;}
.medien-flow-root-container {display:flow-root;width:100%}
.medien-flow-root-container p {margin-top:0;}
.medien-flow-root-container img {float:left;margin:0 1em .5em 0;box-shadow:var(--box-shadow-medien);} 
.medien-flow-root-container video {float:left;margin:0 1em .5em 0;box-shadow:var(--box-shadow-medien);}
/*-------------------------------------------------------------------------------------------*/ 
/* Grid mit image und text                                                                   */
/*-------------------------------------------------------------------------------------------*/ 
.medien-gridbox-container {
	box-sizing:border-box;
	background-color:var(--background-color-1);
	display:grid;
	border:0em black solid; 
	grid-template-columns:1fr auto;
	grid-template-rows: max-content;
	gap:1em;
}
/*               grid-area:1 / 3 / span 2 / 3                                           */
/* The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.   */
.medien-gridbox-container-item-1 {grid-area:1 / 1 / 1 / 1;border:0em green solid;}
.medien-gridbox-container-item-1 img {width:10em;height:auto;border:0em black solid;}
.medien-gridbox-container-item-1 video {width:10em;height:auto;border:0em black solid;}

.medien-gridbox-container-item-2 {grid-area:1 / 2 / 1 / 2;border:0em green solid;}
/*-------------------------------------------------------------------------------------------*/ 
/* Felexbox für images oder videos                                                           */
/*-------------------------------------------------------------------------------------------*/ 
.medien-flexbox {
	border:0em red solid;
	box-sizing: border-box;
	display: flex;
	flex-wrap:wrap;
	justify-content:left;
	gap:1em;
}

.medien-flexbox-items {
	box-sizing: border-box;
	background: transparent;
	flex-basis:auto;
	text-align: left;
	border:0em green solid;
}
.medien-flexbox-items img {box-shadow:var(--box-shadow-medien);}
.medien-flexbox-items video {box-shadow:var(--box-shadow-medien);}
.medien-flexbox:last-child{margin:.5em;}
/*-------------------------------------------------------------------------------------------*/ 
/* block mit image oder video und text                                                       */
/*-------------------------------------------------------------------------------------------*/ 
.medien-block-1 {
	box-sizing: border-box;
	display:block;
	background-color: var(--background-color-1);
	box-shadow:var(--box-shadow-medien);
	margin-top:.5em;
}
.medien-block-1 img {width:11em;height:auto;margin-bottom:-.4em;}
.medien-block-1 video {width:11em;height:auto;margin-bottom:-.4em;}

.medien-block-1-text:not(:empty) {width:10.3em;padding:.3em .3em .3em .3em;background-color: var(--background-color-1);}
/*-------------------------------------------------------------------------------------------*/ 
/* Upload grid Container                                                                     */
/*-------------------------------------------------------------------------------------------*/ 
.upload-medien-grid-container {
	box-sizing: border-box;
	background-color: lightgray;
	border:.1em darkgray solid;
	display:grid;
	column-gap:.5em;
	row-gap:.5em;
	grid-template-columns: max-content auto;
}
/*               grid-area:1 / 3 / span 2 / 3                                           */
/* The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.   */
.upload-medien-grid-container-box01 {grid-area: 1 / 1 / span 3 / 1;padding:.3em;align-self: center;}
.upload-medien-grid-container-box01 img {height:10em;width:10em;object-fit:scale-down;}
.upload-medien-grid-container-box01 video {height:20em;}
.upload-medien-grid-container-box02 {grid-area: 1 / 2 / 1 / 2;padding-top:.2em;border:.0em yellow solid;}
.upload-medien-grid-container-box02 textarea {width:calc(100% - .5em);height:5em;border:.0em blue solid;}
/*-------------------------------------------------------------------------------------------*/ 
/* Grosse Aufloesung                                                                         */
/*-------------------------------------------------------------------------------------------*/ 
@media (min-resolution: 200dpi) {}
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Querformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 360px) and (max-width: 1024px) and (orientation:landscape) {}
/*-------------------------------------------------------------------------------------------*/ 
/* Handy Hochformat                                                                          */
/*-------------------------------------------------------------------------------------------*/ 
@media only screen and (min-width: 150px) and (max-width: 1024px) and (orientation:portrait) {
	.medien-gridbox-container {display: flex;flex-wrap:wrap;justify-content:center;}
	.medien-gridbox-container-item-2 {padding:.8em;border:0em green solid;}
	
	.upload-medien-grid-container {display:block;}
	.upload-medien-grid-container-box01 img {width:100%;height:auto;}
	.upload-medien-grid-container-box01 video {width:100%;height:auto;}

  .upload-medien-grid-container div {padding-left:.5em;padding-right:.5em;padding-top:.5em;}
  .upload-medien-grid-container-box02 {padding-bottom:.5em;} 

}