/*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-person              macht beim Personen Objekt Ränder kleiner
.dav-da-no-person-pic        macht das Personenbild weg
/*
/*

*/


/*#############################################################
######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
*/


@import url("/053 - Sektion Darmstadt-Starkenburg/CSS/dav-da-global.css");

.dav-accordion .v-expansion-panel-header{
		padding:14px;
}
  
.dav-da-person .person {padding : 0 !important;}
/* .dav-da-table formatiert die Preislisten und andere Tabelllen, wird  table zugewiesen
*/
.dav-da-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Hellgraue Hintergrundfarbe für gerade Zeilen */
}
.dav-da-table th, .dav-da-table td {
    border: 1px solid #ddd; 
    padding: 0.5em; 
}

/*macht tabelle horizontal scrollbar
 table in div rein  und div  .dav-da-table-scrollable zuweisen
*/
.dav-da-table-scrollable {
  width: 100%;
  overflow-y: scroll;
  -webkit-scrollbar-width: thin;
 
}




/* 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 ****/


.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/Edelweiss-voll.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;
}


.dav-da-no-person-pic .flex-grow-0 {
    visibility: hidden;
    height: 0;
}