/* Ergaenzungen von LHP */
/* 
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
*/ 

div[itemprop="articleBody"] section a {
  color: blue;
  
}

	.rph-100 {
		height: 500px;
        overflow: hidden;
	}

	.rph-75 {
		height:380px;
        overflow: hidden;
	}


	.rph-60 {
		height: 300px;
        overflow: hidden;
	}

	.rph-50 {
		height: 250px;
        overflow: hidden;
	}

	.rph-33 {
		height: 200px;
        overflow: hidden;
	}

	.rph-25 {
		height: 150px;
        overflow: hidden;
	}

	.rph-15 {
		height: 90px;
        overflow: hidden;
	}

	.rph-10 {
		height: 90px;
        overflow: hidden;
	}

@media screen and (max-width: 768px) {
  	.rph-100 {
		height: 420px;
	}

	.rph-75 {
		height: 450px;
	}


	.rph-50 {
		height: 300px;
	}

	.rph-33 {
		height: 200px;
	}

	.rph-25 {
		height: 150px;
	}
  
}


#rp-3-plusControls > div > div > a > div > imgxxxx,
.card-h-100 > .card > a > div > img,
.card-h-100 > .card {
  height:100px;
  max-height: 100%;
  background-color: coral;
}




/* Grundsätzliche Einstellungen */

.externalLink {
    text-decoration: underline; 
    color: red;
    font-style: italic;  
}

ul.tags.inline {
   padding: 0rem;
}

ul.tags.inline > li {
  background-color: white;
  color: black;
  border: 1px solid #e7e7e7;
  border-radius: 0.4rem;
  padding: 0.2rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin: 0.1rem 0.1rem;
  transition-duration: 0.2s;
  cursor: pointer; 
}

ul.tags.inline > li:hover {
  background-color: #e7e7e7;
  color: black;
}



/* Allgemeiner Hover Effekt bei Cards  */

.card:hover {
    text-decoration: none;
    transform: scale(1.01); 
    transition: all 0.1s;
}

/* ABO-Kacheln */

.shop + .card img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  height: 150px;
}

.tags li:hover,
.tags a:hover {
    color: var(--rp-logo-red);
    text-decoration: none;
    border-color: #6c757d;
 }

/* Card allgemein  */
.card .fto,
.card .img_caption {
   display: none;
}


/* Card Leading und Beitrag */

.beitrag .card {
  width:100%;
  object-fit: cover;
  /* background-color: var(--rp-gray-light-41);*/
  opacity: 1;
  text-decoration: none;  
}


/* .leading strong, */

.beitrag .card .einleitung,
.leading br,
.beitrag strong { 
display: none;
}

.beitrag .card .einleitung,
.beitrag strong {
 margin: 0; 
 padding:0rem 0.5rem 0.5rem 0rem;
 display: none;
  
}

.beitrag.full .card  > strong,
.beitrag.full .card > .einleitung {
 font-weight: normal; 
 position: relative;
 top: -5rem;
 padding:0rem 0rem 0rem 1rem;
 display: block;
 overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 4;
}



 
/* Beitrag allgemein  */

.beitrag .card > img.caption,
.beitrag .card img {
        max-height: 220px; 
        object-fit: cover;
}

/*
.beitrag .card .h1planen > span:first-child, 
.item .card .h1info > span:first-child,
.leading .card .h1info > span:first-child,
*/
.beitrag .card .h1planen > span:first-child, 
.beitrag .card .h1info > span:first-child {
  text-decoration: none;  
   color: white;
   background-color: var(--rp-logo-red);
   text-transform: uppercase;
  font-size: 1.0rem; 
  line-height: 1.3rem;
  display: inline-block;
  position: relative;
  padding: 0rem 1rem 0.2rem 1rem;
  margin: 0;
}

  
  
.beitrag .card .h1planen > span:nth-child(2),
.beitrag .card .h1info > span:nth-child(2){
   text-decoration: none;
   font-size: 1.3rem; 
   opacity: 1;
   border-style: solid;
 /*  justify-content: center; */
 /*  border-color: var(--rp-gray-light-41);*/
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   margin: 0;
   width: 100%;
   display: block;
   position: relative;
   border-style: none;
   display: flex;
   align-items: center;
}

  
.beitrag .card .h1planen > span:first-child, 
.beitrag .card .h1info > span:first-child {
  top: -5rem;

}

.beitrag.topnull .card .h1planen > span:nth-child(2),
.beitrag.topnull .card .h1info > span:nth-child(2), 
.beitrag.topnull .card .h1planen > span:first-child, 
.beitrag.topnull .card .h1info > span:first-child,
.beitrag.full.topnull .card > strong,
.beitrag.full.topnull .card > .einleitung {
  top: -0.5rem; 
}

.beitrag.topnull .card .h1planen > span:first-child, 
.beitrag.topnull .card .h1info > span:first-child {
  background-color: transparent;
   color: grey;

}

/* Leading-1 allgemein  */

.leading .card img {
        width: 100%; 
        height: 500px; 
        object-fit: cover;
}


.leading-1 .card .h1planen > span:first-child,
.leading-1 .card .h1info > span:first-child {
   color: white;
   background-color: var(--rp-logo-red);
   text-transform: uppercase;
   font-size: 1.3rem;
   position: absolute;
   top: 8.65rem;
   left: 4rem;
   margin:0;
   padding: 0.3rem 0.5rem 0.3rem 1rem;
}


/*    LEADING.  TEST    */
.leading-1 .card .h1planen > span:nth-child(2),
.leading-1 .card .h1info > span:nth-child(2) {
   text-decoration: none;  
   background-color: transparent;
   border-width: 0px;
   font-size: 2rem; 
   line-height:2.2rem;
   width: 75%;
   display: flex;
   height : 3.5rem;
 /*   justify-content: center; */
   align-items: center;
   position: absolute;
   left: 4rem;
   top: 13.0rem;
   padding: 0rem 0.5rem 1rem 1rem;
   margin:0;
   z-index: 1;
}


.leading-1 .card > span.einleitung,
.leading-1 .card > strong,
.leading .card > span.einleitung,
.leading .card > strong {
   font-family: "Open Sans";
   font-weight: 400;
/*   background-color: var(--rp-gray-light-41);*/
   opacity: 0.85;
   width: 75%;
   position: absolute;
   left: 4rem;
   top: 10.65rem;
   padding:7rem 0.5rem 1.5rem 1rem;
   display: box; 
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
}







/* DPA Texte und Bilder */

img.caption  {
   width: 100%;
   height: auto;
}

.fto,
.img_caption  {
 font-size: small;
 line-height: 110%;
 width: 100%;
 height: auto;
 background-color: var(--rp-gray-light-41);
 padding: 0.5rem 0.5rem 1rem 0.5rem;
}


artikel span.strong,
artikel span.einleitung {
 border-left: 4px solid var(--rp-gray-light-26);
 padding: 0rem 1rem 0rem 1rem;
 margin: 1rem 0rem 1rem 0rem;
 font-weight: bold;
 display: block;
 font-style: italic;
}


section.linkbox > ul  {
 padding:1rem;
 margin: 1rem;
}

section.linkbox > ul::before { content: "weitere Links zum Beitrag"; } 

section.linkbox > ul > li {
 list-style-type: none;
 list-style-position: inside;
 margin: 0rem;
}

section.linkbox > ul > li:nth-of-type(odd) {
 background-color: var(--rp-gray-light-41);
}

.dpaCopy {
  font-size: small;
  color:var(--rp-gray-light-28); 
}

.rp-scroll,
.hs {
  display: grid;
  grid-gap: calc(5px / 2);
  grid-template-columns: 10px;
  padding : 0rem 0rem 1.5rem 0rem;
  grid-template-rows:100%;
  grid-auto-flow: column;
  grid-auto-columns: calc(360px - 20px * 2);
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.topplusslider {
  display: grid;
  grid-gap: calc(10px / 2);
  grid-template-columns: 10px;
  grid-template-rows: minmax(100%, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc(80% - 30px * 2);
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.rp-scroll:before,
.rp-scroll:after,
.topplusslider:before,
.topplusslider:after,
.hs:before, 
.hs:after {
  content: '';
  width:2px;
}


/* Kleine Geräte 768px und breiter */ 

@media screen and (max-width: 768px) {
/*
xxxxxxxxx-aside.dpa {
  width: 40%;
  height:100vh;
  padding: 0.5rem 0.5rem 1rem 0rem;
  margin: 0.5rem 2rem 1rem 0rem;
  float: left;
  font-style: italic;
  overflow: auto;
  }
  

  
  
.hs {
 grid-auto-columns: calc(minmax(350px,(9o%)-1rem);
} 
  
  

aside.top-right {
   display: none;
}
  
  
body > div > div > main > div.row.p-4 {
  padding: 0 !important;
  
 } 
  
.px-4 {  
    padding-left: 0 !important;
    padding-right: 0 !important;  
  }

:root {
  --text-multiplier: 0.8;
}

.pl-4 {  
    padding-left: 0 !important;
  }
  
.pr-4 {  
    padding-right: 0!important;  
  } 

  
  
 .leading-1 .card .h1planen > span:nth-child(2), 
 .leading-1 .card .h1info > span:nth-child(2) {
   font-size: 1.6rem;
   width: 90%;
   left: 1.2rem;
   top: 6.0rem;
} 
    
 
.leading-1 .card .h1planen > span:nth-child(2),
.leading-1 .card .h1info > span:nth-child(2) {
   font-size: 1.6rem;
   width: 90%;
   left: 0.2rem important!;
   top: 6.0rem  important!;
} 
  
     
.leading-1 .card > span.einleitung,
.leading-1 .card > strong {
   width: 90%;
   padding: 7rem 0.5rem 0.5rem 0rem;
   left: 0rem;
   top: 4rem;
   color: green;
} 

#carouselExampleControls > div > div > a > div > img { 
   object-fit: cover;
 }
 

.leading-1 .slider { left: 0.2rem;}  

body > div > div > main > div.row.pt-3.px-4 > div > div {
    display: none; 
 }
   */

.topplusslider {
  grid-template-rows: minmax(350px, 1fr);
  grid-auto-columns: calc(100VW - 30px * 2);
}
 
}






@media screen and (max-width: 768px) {
  
.leading-1 .card .h1planen > span:first-child,
.leading-1 .card .h1info > span:first-child {
   left: 0.2rem;
}

.leading-1 .card .h1planen > span:nth-child(2),
.leading-1 .card .h1info > span:nth-child(2) 
{
   left: 0.0rem;
   margin: 0rem 0rem 0.5rem 0.2rem;
   left: 0.2rem;
   font-size: 80%; 
   line-height:100%;
   width: 100%;
   height : 5rem;
   bottom: 17.0rem;

  } 
  
.leading-1 .card > span.einleitung,
.leading-1 .card > strong {
   bottom: 0rem;
   left: 0.2rem;
   opacity: 1;
   width: 100%;
   margin-bottom:0rem;
   padding:8rem 0.5rem 1.5rem 1rem;
} 
  
.leading .card img {
        width: 100%; 
        padding-bottom: 200px;
}
  
.leading .card img {
        width: 100%; 
        height:auto; 
        object-fit: cover;
}
  
}