/*  ************************************************************************************** 
 *  Globbale Einstellungen
 *  ============================
 *      
 **************************************************************************************** */
:root{
    --intesblau:#0066ff;
}

a{
    text-decoration:none;
}
.rund{
    border-radius:.71rem!important;
    background-color:whitesmoke;
}



.carousel-inner {border-radius:.71rem!important;background-color:whitesmoke!important; }



/*  ************************************************************************************** 
 *  Karten in den Übersichts-Seiten
 *  ===============================
 *      
 **************************************************************************************** */
a.card-header:hover{
    color:whitesmoke;
}
.card-header{
      background-color:#0066ff;
      color:white;
}
.card-header a{
      color:white;
}
.card-img-top{
    height: 10vmax;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}
.breadcrumb{
    color:white!important;
}
.breadcrumb a{
    color:white!important;
    margin-left:0.25rem;
    margin-right:0.25rem;
}

/*  ************************************************************************************** 
 *  Globbales Seiten-Heading
 *  ========================
 *      
 **************************************************************************************** */
#top_banner h1{
          color:white;
}
li a.nav-link.dropdown-toggle, .navbar-brand{
        color:white;
        font-weight: 600;
}
/*  ************************************************************************************** 
 *  E-Mail Adresse von Bots verstecken
 *  ==================================
 * 
 **************************************************************************************** */

.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

/*  ************************************************************************************** 
 *  Mega-Menu
 *  ==============
 *      
 **************************************************************************************** */
.navbar .megamenu{ padding: 1rem; background-color: aliceblue;}
.aktiv{text-decoration:underline;}
.navbar-dark .navbar-nav .nav-link{color:white!important;}
.title .navi-header{color:#0d6efd!important;}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .has-megamenu{position:static!important;}
	.navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
}

/* ============ mobile view ============ */
@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
}
.fixed-top{
    background-color:#0066ff;background-blend-mode:soft-light; background-image:url('assets/bilder_neu/top_background');background-repeat:no-repeat;background-size: 100% auto;
}

.megamenu li a{margin-left:1rem; }
    .card-group img{ height: 250px;
                    width: 100% !important;
                    object-fit: cover;
                    object-position: top center;
                        padding-inline: 2rem;
    }
 


/*  ************************************************************************************** 
 *  Accordeon mit <details>
 *  =======================
 *              das Bootstrap Accordeon ist in der Anwendung zu kompliziert
 *              wir verwenden details mit eigenem CSS.
 *                          
 **************************************************************************************** */

details img {
    max-width: 100%;
}

details {
    padding: 0;
}

details article{
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0 0 5px 5px;
}
details article::after{
    display: block;
    clear: both;
    content: "";
}
details summary {
    display:flex;   /* um Zeichen rechts zu zeigen  */
    padding: 1rem 1.25rem;
    background-color: white; /*#e7f1ff;  */
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 3px;
    color:black;
    cursor: pointer;
    list-style: none; /* Dreick nicht zeigen */
}

details summary::-webkit-details-marker {
    display: none;  /* Dreick nicht zeigen - Style für Webkit-Browser */
}
details summary::after {
    width:1.25rem;
    height:1.25rem;
    content: ' ';
    color: red;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='dark-grey'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'></path></svg>");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    margin-left:auto;
    transition: transform .2s ease-in-out;
}
details[open] summary::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='blue'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'></path></svg>");
    padding-right: .25rem;
    transform: rotate(-180deg);
}
details[open] summary {
    color:#0c63e4;
    background-color: #e7f1ff;
    border-radius: 3px 3px 0 0;
}

/*   ENDE <details>  *******************************************************************************************  */

/*  ************************************************************************************** 
 *  Events : Anpassungen für die Übersicht der Veranstaltungen
 *  =======
 **************************************************************************************** */
.events summary{
    xxmargin-top:1em;
    xxbackground-color:whitesmoke;
}
.events .card-body{
    xxbackground-color:grey;
}
.events .card{
   xxbackground-color:white;
}