/*Darstellung Termine*/

.ListDateView .box { background:#fff;margin-bottom: 1.25em;border: 1px solid #000;padding: 1.25em 1.5em;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: stretch;justify-content: flex-start;align-items: stretch; 
  padding: 1.4em 1.5em;}

.ListDateView .news-list-date 	{text-align: center; background-color: var(--HUSSgelb); display: flex;flex-direction: column;justify-content: center;align-items: center;padding: .5em 1em; box-shadow:var(--boxshadow);min-width: 9em;}

.ListDateView .news-list-date .date__day,
.ListDateView .news-list-date .date__month 	{font-family: var(--FontFamily); font-weight: 700;}
.ListDateView .news-list-date .date__day	{font-size: 2.85rem;  display: block; }
.ListDateView .news-list-date .date__month  {font-size: .85rem; text-transform: uppercase}


.ListDateView .news-list-text			{padding-left: 1.25em}	
.ListDateView .news-list-text p			{padding:0; margin: 0}
.ListDateView .news-list-text p.title	{font-weight: 500; 		font-size: 1.45rem; font-size: 1.25rem;}
.ListDateView .news-list-text p.location{font-weight: 700; 		font-size: 2rem; text-transform: uppercase; overflow-wrap: break-word;column-break-before: column;}
.ListDateView .news-list-text p.notes	{font-weight: normal; 	font-size: 1.45rem}


/*News Startseite mit Slider*/
.ListViewSlideStart .slide-news-img	{height: 287px; overflow: hidden;  display: block}
.ListViewSlideStart img 		{width: 100%; height: auto}
.ListViewSlideStart header	 	{background: var(--HUSSgelb); padding: .5em 1.5em; margin-top: .25em; border: 1px solid var(--HUSSgelb); line-height: 160%; min-height: 102px;}
.ListViewSlideStart header .h4	{padding: 0; padding-bottom: .25em; font-size: 1.25rem; display: block}
.ListViewSlideStart header a 	{color: #000; font-size: .9rem}

.frame-type-news_pi1 header .right {margin-right: 0.25em;}

.ListViewSlideStart .slick-slide .inner{ width: calc(100%  - 1em); }

.ListViewSlideStart .slick-dots li button:before 			  {font-size: 20px;left: -.5em;content: '■';color: var(--HUSSgelb);}
.ListViewSlideStart .slick-dots li.slick-active button:before {color: var(--HUSSgelb);}

.ListViewSlideStart .more span {color: transparent; position: absolute;right: 1em;bottom:.5em; width: 30px;aspect-ratio: 1;}
.ListViewSlideStart .more span:after {content: "";position: absolute;inset: 30%;transform: translateY(20%) rotate(45deg);border-top: 3px solid #000;border-right: 3px solid #000;}

.ListViewSlideStart .slick-prev,
.ListViewSlideStart .slick-next {z-index: 4;top: 40%;width: 50px; height: 50px}
.ListViewSlideStart .slick-prev {left: 10px;}
.ListViewSlideStart .slick-next {right: 25px;}

.ListViewSlideStart .slick-prev:before,
.ListViewSlideStart .slick-next:before {content: "";opacity: 1;position: absolute;inset: 30%; border-top: 4px solid #fff; border-right: 4px solid #fff;}
.ListViewSlideStart .slick-prev:before {transform: translateY(20%) rotate(-135deg);}
.ListViewSlideStart .slick-next:before {transform: translateY(20%) rotate(45deg);}
 
/*News ListView*/
.layout-4 .frame-type-news_pi1 {width: var(--width-max-content); margin: auto;position: relative}
.ListView .list-news-img{height: auto; overflow: hidden;  display: block; border-bottom: 0.25em solid #fff;}
.ListView img 		    {width: 100%; height: auto}
.ListView header	 	{background: var(--HUSSgelb); padding: .5em 1.5em; margin-top: .25em; border: 1px solid var(--HUSSgelb); line-height: 160%}
.ListView header .h4	{padding: 0; padding-bottom: .25em; font-size: 1.25rem; display: block}
.ListView header a 	    {color: #000; font-size: .9rem}

.ListView{margin: 1em -0.5em;padding: 0; display: flex; flex-direction: row;flex-wrap: wrap; align-content: stretch;justify-content: flex-start;align-items: flex-start;align-items: stretch;}
.ListView article{width: calc(100% /3 - 2em);overflow: hidden;background-color: var(--HUSSgelb);margin: 1em;padding-bottom:1em}
.ListView .more span {color: transparent; position: absolute;right: 1em;bottom:.5em; width: 30px;aspect-ratio: 1;}
.ListView .more span:after {content: "";position: absolute;inset: 30%;transform: translateY(20%) rotate(45deg);border-top: 3px solid #000;border-right: 3px solid #000;}

.frame-type-news_pi1 header .right {margin-right: 0.25em;}

/*ListJob*/
.ListJob {margin-bottom:3em}
.ListJob job-item {border-bottom: 1px solid var(--HUSSblack10);width: 100%;display: flex;flex-direction: row;flex-wrap: nowrap; padding:1em; justify-content: space-between;}
.ListJob job-item:hover{background: var(--HUSSblack10)}
  
.ListJob .job__title {width: 30em; padding-right: 1em}
.ListJob .job__teaser{width: calc(100% - 15em); }
.ListJob .job__links {/*width: 5em;*/ padding-left:1em}

.ListJob .job__title a {font-size: 1.25rem; color: #000; }
.ListJob .job__teaser p {font-size: 1.15rem; padding:0}

.ListJob .more span       {color: transparent;display: block;aspect-ratio: 1;height: 20px; width: 20px;}
.ListJob .more span:after {content: "";inset: 30%;display: block;height: 15px; width: 15px;transform: translateY(-100%) rotate(45deg);border-top: 2px solid #000;border-right: 2px solid #000;}

.ListJob .job__title a:hover {color: var(--HUSSgelb)}
.ListJob .more:hover span:after {border-color: var(--HUSSgelb)}


/*NewsDetail*/
.frame-type-news_newsdetail .news-header-wrap,
.frame-type-news_newsdetail .news-text-wrap,
.frame-type-news_newsdetail .news-text-wrap ul     {width: 80%}

.frame-type-news_newsdetail .news-meta-wrap {color: var(--HUSSblack70); font-size: 0.85rem; margin-bottom: 1em; margin-top: -2em}

.frame-type-news_newsdetail .news-text-wrap ul      {list-style-type: square;padding-bottom: 0.75em}
.frame-type-news_newsdetail .news-text-wrap ul li   {margin:0 1em .5em 1em; font-size: 1.5rem; }

.frame-type-news_newsdetail ul.news-image-wrap      {width: 100%;list-style-type: none; padding: 0;display: flex; flex-direction: row; flex-wrap: wrap;align-content: stretch; justify-content: flex-start;align-items: flex-start; margin-bottom: 3em; margin-top:1em}
.frame-type-news_newsdetail ul.news-image-wrap li   {width: calc(100% /3 - 2em);/*height: 300px; */margin: 1em;margin-left: 0}
.frame-type-news_newsdetail ul.news-image-wrap li a {display: block; overflow: hidden}

.frame-type-news_newsdetail img{width: 100%; height: auto;z-index: 1;}

.frame-type-news_newsdetail figcaption{z-index: 500; padding:1em }

/*prev next NEws*/
.frame-type-news_newsdetail .news-pager                 {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;padding: 2em 1em 3em 1em}
.frame-type-news_newsdetail .news-pager li              {padding: .5em}
.frame-type-news_newsdetail .news-pager li a span       {background: var(--HUSSblack50); padding: 1em;color: #fff; }
.frame-type-news_newsdetail .news-pager li.next a span  {margin-right: 1em}
.frame-type-news_newsdetail .news-pager li.prev a span  {margin-left: 1em}
.frame-type-news_newsdetail .news-pager li a:hover span {background: var(--HUSSgelb); }


@media screen and (max-width:1390px ) {
  .ListDateView .news-list-text p.title     {font-size: 1rem;}
}

@media screen and (max-width:1315px ) {
  .ListDateView .news-list-text p.location     {font-size: 2rem}
}


@media screen and (max-width:1262px ) {
  .ListDateView .news-list-date .date__day {font-size: 2.5rem;}
  .ListDateView .news-list-date{min-width: fit-content;}
  
  .ListViewSlideStart img 		{width: auto; height: 100%}
}


@media screen and (max-width:1200px ) {
  .ListDateView .news-list-date .date__day  {font-size: 1.5rem;}
  .ListDateView .news-list-text p.title     {font-size: 1rem}
  .ListDateView .news-list-text p.location 	{font-size: 1.5rem}
  .ListDateView .news-list-text p.notes     {font-size: 1rem}
  
  
}

@media screen and (max-width:1040px ) {
  .ListViewSlideStart img 		{width: 100%; height: auto;}
  .frame-type-news_newsdetail .news-header-wrap, .frame-type-news_newsdetail .news-text-wrap, .frame-type-news_newsdetail .news-text-wrap ul {width: 100%;}
}
@media screen and (max-width:1024px ) {
  
}

@media screen and (max-width:980px ) {
  .ListDateView .box            {padding: .5em }
  .ListDateView .news-list-date {padding:.5em}
  
  .ListView article{width: calc(100% /2 - 2em);}
  
}
@media screen and (max-width:850px ) {
  .ListViewSlideStart .slick-slide .inner {width: 100%;}
  
  .ListDateView .news-list-date .date__day	{font-size: 2.85rem}
  .ListDateView .news-list-date .date__month{font-size: .85rem}
  .ListDateView .news-list-text p.title	    {font-size: 1.45rem}
  .ListDateView .news-list-text p.location  {font-size: 2.75rem}
  .ListDateView .news-list-text p.notes	    {font-size: 1.45rem}
  
  .frame-type-news_newsdetail ul.news-image-wrap li {width: calc(100% /2 - 1em);}
}


@media screen and (max-width:680px ) {
 .ListView article{width:100%;}
 
}

@media screen and (max-width:610px ) {
  .ListJob job-item {flex-wrap: wrap;align-items: top;justify-content: space-between;}
  .ListJob .job__teaser {width: calc(100% - 5em);}
  .ListJob .job__title {width: auto;}
}

@media screen and (max-width:570px ) {
  .ListDateView .news-list-date .date__day { font-size: 2.5rem;}
  .ListDateView .news-list-text p.title{font-size: 1.25rem}
  .ListDateView .news-list-text p.location 	{font-size: 2rem}
  .ListDateView .news-list-text p.notes{font-size: 1.25rem}
  
  .frame-type-news_newsdetail ul.news-image-wrap li {width: 100%;}


}

@media screen and (max-width:425px ) {
  .ListDateView .box                        {padding: .5em }
  .ListDateView .news-list-date             {padding:.5em}
  .ListDateView .news-list-date .date__day  {font-size: 2rem;}
  .ListDateView .news-list-text p.title     {font-size: 1rem}
  .ListDateView .news-list-text p.location 	{font-size: 1.5rem}
  .ListDateView .news-list-text p.notes     {font-size: 1rem}
}

@media screen and (max-width:420px ) {
  .ListJob job-item {padding:0.75em 0}
  .ListJob .job__title { padding-right: 0;}
}

@media screen and (max-width:400px ) {
  .ListViewSlideStart img 		{width: auto; height: 100%;}
}

@media screen and (max-width:320px ) {
  .ListJob .job__links {width: 100%;padding-left: 90%;}
}