/*auk-da-notags macht das copyright unter bild-text elementen weg
/*dr-Plano Anpassungen*/
/*dr Plano Überschrift soll so groß werden wie die h1 im dav template
/*dav-da-external macht die externe linkkennung weg, da die bei Logos mist aussieht
*/
@import url("/053 - Sektion Darmstadt-Starkenburg/CSS/dav-da-global.css");

/* dr Plano******
***********************/
    .drp-course-title{
    font-size: 42px;
    font-weight: 900;
    letter-spacing: .19px;
    line-height: 1.24;
    text-align: left !important;
    }
     .drp-course-subtitle{
         text-align:left !important;
     }
.dr-plano-auk #drp-booking{
    padding: 0;
}
.dr-plano-auk td {
    vertical-align: top;
}
.dr-plano-auk tr{
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
.dr-plano-script {
    margin: 0;
    visibility: hidden;
    padding:0;
}
.dr-plano-script .embed, .dr-plano-script .py-4{
    margin:0 !important;
    padding:0 !important;
    
}

/* ende dr Plano******
***********************/



/*für die Logos der Partner in embeded-Partner*/
.dav-da-partner {
   
    padding: 0.8rem 0.8rem 0 0;

}

/*hier noch einbauen, dass externer Link beim drüber hovern erscheint
.dav-da-hover-div:hover + .hide {
  display: block;
  color: red;
  ###das funzt nicht egal wo hover steht
  .dav-da-external.external:after + .dav-da-external.external:after:hover {
      visibility: visible;
  } 
}
*/

.dav-da-partner .dav-da-external.external:after {
    display:none;
}
 


/* ende  Logos der Partner in S-Partner*/
.dav-da-no-date .teaser-text .text-font-s-bold { 
    visibility:hidden;
  line-height:0;
  margin-bottom: -5px;
}

/* .dav-da-table formatiert die Preislisten und andere Tabelllen, wird  tbody zugewiesen
*/
.dav-da-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Hellgraue Hintergrundfarbe für gerade Zeilen */
}
.dav-da-table th, .auk-da-table td {
    border: 1px solid #ddd; 
    padding: 0.5em; 
}

/*macht tabelle horizontal scrollbar
*/
.dav-da-table-scrollable {
  width: 100%;
  overflow-y: auto;
  /*margin: 0 0 1em;
  */
}
.dav-da-table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

/* für ein Responsive Iframe .auk-da-container 
   .auk-da-responsive-iframe 
*/
 .dav-da-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.dav-da-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/***ende responsive iframe****/




.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}
/******ende scrolable table ****/

 
 
/* ###############allgemeine Anpassungen ###################################
  /* Anpassungen die automatisch mit Laden von dav-da.css geändert werden
  #############################################################*/
.person-list .flex-grow-1 .col-12 {padding-top:0;}
.person-list img, .person-list .person-list__img-placeholder {border-bottom: 1px solid grey;}


/*Abstände zwischen den Containern etwas kleiner machen*/
 .renderlet .teaser-with-text{
     padding:0;
 }
 
 @media (max-width: 1263.98px){
    .renderlet .teaser-with-text .teaser-text-background {
            margin: 1em 0 0;
    }
}
/*padding und margin beim Objekt Person verkleinern*/

.person {padding : 0 !important;
    
}
.person .ml-md-5 {margin: 0 !important;}
.person .col-12.text-left {padding:0;}

/*********/



/* in den Slidern braucht mand die eben kleiner gemachten Abstände dann wieder
*/
.renderlet .slick-initialized .slick-slide {
    padding: 0 0.3em;
}
/* div.py-2 sind offensichtlich leere div die immer am Ende einer .row kommen und unmotivierte Lücken schaffen*/
.pimcore_area_content .py-2 {
    padding:0!important;
    
}

/*Bei den Elementen teaser mit Text wird der grau unterlegte Text direkt ans Bild geschoben*/

 .teaser-with-text .teaser-text-background {
    margin-top:  0;
}


/*vernünftige Abstädne für die Dots unter der feed-with-text Box*/
.feed-with-text .slick-dots {
    bottom: -30px!important;
}

/* ////ende Abstände kleiner */ 
  
/*macht Cookie Banner kleiner und IMMER scrolbar) ein Rahmen gibts auch*/
.cookie-banner-content{
		
		 
		   height: 50vh;
		    overflow-y: scroll;
		    bottom:30px;
		    border: solid 4px green;
		    background-color: #eee;
}
/*macht das overlay vom Cookiebanner kleiner dann kann man trotze cookiebanner links anklicken*/
.cookie-banner__overlay {
  height: 50vh;
} 


/*
überschreibt  die Anweisungen für teaser-image die original schwarz unterlegte Schrift haben 
*/
.renderlet .teaser-text-absolute .teaser-text-background {
    background-color: grey;
     -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: hsla(0,0%,100%,.5);
    color: #000000;
    padding-bottom:0.4rem!important;
    padding-top:0.4rem!important;
}

/*macht im Teaser-text-image die weiß hinterlegte aufklapp Textbox weniger transparent und mehr blury
*/
@media (max-width: 1263.98px){
 .teaser-with-text .teaser-text-background.teaser-background {
    background-color: grey;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: hsla(0,0%,100%,.5);
    background-color: rgba(255,255,255,.5);
    border-radius: 0 ; 

}
}

/*Anpassungen in der Artikel Detailansicht
nimmt die Überschrift aus dem (kleinen Artikel Heroteaser), und macht den schwarzen Verlauf im Titelbild weg
und (siehe css bei dav-da-list)  das Einstelldatum klein 
*/
#article-detail .my-4.d-sm-block.d-md-none{
    margin-top:0!important;
    margin-bottom:0!important;
}
 
#article-detail .container{
    padding-top: 0!important;
    padding-bottom:0 !important;
}
#article-detail .my-5{
    margin-top:0 !important;
    margin-bottom:0!important;
}
/*gradient weg im Hero Teaser*/
 
#article-detail .hero-teaser-slider .hero-teaser:after {
    background-image: linear-gradient(180deg,transparent 100%,#000);
    bottom: 20px !important;
 }
 
@media (min-width: 960px){
    #article-detail-hero-teaser:after{
        display: none;
        
    }

    #article-detail .d-md-none {
        display: block!important; 
        }
}
/*####Cookiebox

reduziert Größe der Cookiebox und macht sie IMMER scrollbar)
.cookie-banner-content{
		
		 
		   height: 30vh;
		    overflow-y: scroll;
}

/*######################################
Ende sllgemeine Anpassungen
########################################*/
 /*Pimcore Mods */
/*
dav-da-classes              können in Bereich und Absatz eingefügt werden (im Renderlet theoretisch auch wird aber nciht übernpmmen!!)
.dav-da-list                macht ne hübsche Artikel Liste
.dav-da-no-tags             macht in der Ansicht Bild mit Text bei Artikeln die Tags weg und das Datum klein 
.dav-da-no-tags-huette      macht in der Ansicht Bild mit Text bei Hütten und Gruppen die Tags weg (Datum gibts hier nicht deshalb eigene class nötig)
.dav-da-hero-teaser         macht den schwarzen Verlauf weg und zentriert den Text der schwarz hinterlegt wird
                            auch die Bilder über den Artikeln sind heroteaser
.dav-da-no-cr               macht das copy-right weg
.dav-da-einleitung          zentrit das Element Text, und macht die h1 Überschrift grün - gedacht für den Einleitungsabsatz auf einer Seite
.dav-da-hr                  macht das Element horizontale line 2px fett statt original 1px
.dav-da-no-orte             macht orte und Region Spqlte weg im Kursprogramm
.dav-da-kachel              macht aus dem Elment medium-mit-Text eine grau hinterlegte Kachel ohne Copyright unterm Bild. Ideal für Übersichtsseiten
.dav-da-no-date             macht das datum aus der Artikelansicht Teaser feed Bild weg
.dav-da-table               formatiert die Preislisten und andere Tabelllen, wird  tbody zugewiesen
.dav-da-table-scrollable       macht tabelle horizontal scrollbar
.dav-da--container          für ein Responsive Iframe 
.dav-da-da-responsive-iframe 

*/





/*#############################################################
######dav-da-list##########*
Anpassungen für die Listenansicht der Newsartikel
/*im Original lsiteansicht ist ein grüner bg wir machen ihn grau aber nur in den .row classen - dadurch entstehen optische Abstände zwischen den Listenelementen
*/

.dav-da-no-date .teaser-text .text-font-s-bold { 
    visibility:hidden;
  line-height:0;
  margin-bottom: -5px;
}

.dav-da-list .list-box-round, .dav-da-list .my-5 .row{
  background: white;
}

.dav-da-list .object-teaser-item .row {
  background: #f3f3f3
  /*#ddefd6; das ist das originale helle grün
  */
}

.container.dav-da-list{padding:0;}

.dav-da-list .my-5 {
    margin-bottom:0!important;
   margin-top:0!important;
}


.dav-da-list .pt-3 {
padding-top: 0rem !important;
}

.dav-da-list .object-teaser-item {
  margin-bottom: 1.5rem !important;
}

.dav-da-list .container-fluid.list-box-round.mb-5 {
  margin-bottom: 0 !important;
}
.dav-da-list .list-box-round{
    padding:0;
}


.dav-da-list .renderlet .row .col-md-7{
    background-image: url("/053 - Sektion Darmstadt-Starkenburg/CSS/Logo-auk-fade.svg");
    background-size: 20%;
    background-position: bottom -1.6em right -1.6em;
    background-repeat: no-repeat;
   
    border: 0px;
}
.dav-da-list{
    border-bottom: 2px solid rgba(0,0,0,.1);
}

/* macht das EinstellDatum des Artikels klein auch in der Detailansicht
*/
 .dav-da-list .object-teaser-text  div:first-child,
 #article-detail .text-font-s.mb-3{
     color: grey;
    font-size: 14px;
    text-align: right;
    font-style: italic;
    margin-bottom: 0 !important;
 }
 

.dav-da-list .py-1 h1{
    font-size: 24px;
    
}

/*########################################
######################################*/


/*####################################
#########.dav-da-no-tags###########
Anpassungen um die Tags in den Ansichten Teaser-mit Text wegzumachen
Extra class für Hütten = Gruppen nötig, weil da der Untertitel an der Stelle vom Datum (bei Artikelnm steht)
 
/*dav-da-no-tags mach die Tags in der Ansicht Teaser-Feed mit Bild und Text weg 
dav-da-no-tags-huette mach die Tags in der Ansicht Teaser-mit Bild und Text bei der Hüttenlsite ud beio der Gruppenliste weg 
und die Abstädnde kleiner, damit weißer Streifen übr Bild kleiner wird
*/
.dav-da-no-tags div.text-font-regular-bold.pb-2, 
.dav-da-no-tags-huette div.text-font-regular-bold.pb-2,
.tag-navigation div.text-font-regular-bold.pb-2{
    padding-bottom: 0 !important;
    
}

.dav-da-no-tags .renderlet .mb-4,
.dav-da-no-tags-huette .renderlet .mb-4, 
.dav-da-hidden
{
    visibility: hidden;
    display:none!important;
    height:0!important;
    margin-bottom:0 !important;
}


@media (max-width: 1263.98px)
{
      .dav-da-no-tags .renderlet .teaser-text-mobile-absolute .teaser-text-background,
      .dav-da-no-tags-huette .renderlet .teaser-text-mobile-absolute .teaser-text-background,
      .tag-navigation .teaser-text-mobile-absolute .teaser-text-background{
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
    }

    /*tags auch in der Themnübersicht ansicht weg - aber nur solange der Text nicht voll erscheint*/
    .tag-navigation .teaser-text-background.teaser-background .mb-4{
    visibility: hidden;
    display:none!important;
    height:0!important;
    margin-bottom:0 !important;
    }
}


/* macht das EinstellDatum des Artikels klein auch in der Themenübersicht*/
 .tag-navigation.content-loaded .teaser-text div:nth-last-child(3),
 .dav-da-no-tags .teaser-text div:nth-last-child(3)
 {
    color: grey;
    font-size: 12px;
    text-align: right;
    font-style: italic;
 }
/* #############################
################################*/


 
/* #############################
################################
######## dav-da-kachel ######  
Anpassungen für die teaserkachel (Element Medium&Text - Text unten)
*/

.dav-da-kachel, 
.col-md-3.dav-da-kachel-rechts {
   
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding-top:6px !important;
    background: #f3f3f3;
}
 

.dav-da-kachel .my-4, .dav-da-kachel .mb-3, 
.col-md-3.dav-da-kachel-rechts .my-4, 
.col-md-3.dav-da-kachel-rechts .mb-3{
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
    
}
 
 /*copyright hinweis bei Teaserkacheln wegmachen 
 dav-da-kachel-rechts muss in den Absatz*/

.dav-da-kachel .text-font-xs, 
.dav-da-no-cr .pimcore_area_static-media-text .text-font-xs,
.col-md-3.dav-da-kachel-rechts .text-font-xs{
      visibility: hidden;
      display: none;
      margin:-1rem;
  }
 .dav-da-kachel .pimcore_area_static-media-text .text-font-s{

    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: .07px;
    line-height: 1.47;
}

/* #############################
################################/* 

  

/* #############################
################################
######## dav-da-hero-teaser ######  */

.dav-da-hero-teaser .text-font-regular.my-4.text{
    margin-top:0!important;
    margin-bottom:0!important;
}


.dav-da-hero-teaser .hero-teaser-slider .hero-teaser:after {
   background-image: none;
   /*linear-gradient(180deg,transparent 10%,#000000);*/
    bottom: 0;
    content: "";
    height: 30%;
    left: 0;
    position: absolute;
    width: 100%;
}

@media (min-width: 1263.98px){
.dav-da-hero-teaser .position-absolute.hero-teaser-overlay.text-white {
    max-width:50%;
}
}

.dav-da-hero-teaser .position-absolute.hero-teaser-overlay.text-white {
    background-color: grey;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    width: fit-content;
    padding: 10px;
    border-radius: 10px;
   /*display: flex; */
    height: fit-content;
    margin: auto;
    left: 0; bottom:8%; right: 0;
    text-align:center;
}  
/*button steht default auf links, soll aber immer mittig angezeigt werden*/
.dav-da-hero-teaser .text-left {
    text-align:center!important;
}
.dav-da-hero-teaser h2{
    margin-bottom:0;
}
.dav-da-hero-teaser p{
    margin-bottom:0.5rem;
}

/*damit die dots den nach unten verschobenen Link nicht überlagern und unbrauchbar machen*/
.dav-da-hero-teaser .hero-teaser-slider .slick-dots {
    bottom: 3%;
}
/* #############################
###############################*/




/* #############################
################################
######## dav-da-hr ######  */

.dav-da-hr hr {
        border-top: 2px solid rgba(0,0,0,.1);
      margin:0rem;
  }
/* #############################
###############################*/



/* #############################
################################
######## dav-da-einleitung ###### Oberster Absatz einer Seite als Einleitung */
.dav-da-einleitung {
    text-align:center;
    border-bottom: 2px solid rgba(0,0,0,.1);
}
.dav-da-einleitung h1{
    color:#52ae32;
}
/* #############################*/

.dav-da-no-orte .mt-2 :nth-child(7) { 
    visibility: hidden;
    display: none;
}


/* #############################*/


/* #############################
############# ggf. Farbanpassungen für AuK Seite########
.dav-header .desktop-header {
    background-color: #FF5722;
 
    
}
*/