

.Cards_ImgTag { width:100%; display:block; }


.Cards_Img_Beschriftung 
{ 
    padding-top:7px; padding-right:3px; text-align:right; 
    font-size: min(calc(13px + 0.1vw), 19px); /* ### T-ACK #119 ### */
}


/* =============================================================================================================== */
/*                                                Card-Einer-Zeile                                                */
/* =============================================================================================================== */

.Cards_1er__RahmenDiv__Typ_1 
{ 
    width:41%; max-width:650px; /* Breite effektiv ca. so wie bei 'Cards_2er__Card_1__Typ_1' bzw. 'Cards_2er__Card_2__Typ_1'  */ 
    margin-left:auto; margin-right:auto;
    border:1px solid #aaaaaa;
    background-color:#ffffff;
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.07);
}


/* =============================================================================================================== */
/*                                                Card-Zweier-Zeile                                                */
/* =============================================================================================================== */


/* --------------------- Typ 1 --------------------- */
.Cards_2er__FlexBox__Typ_1
{ display:flex; justify-content: center; width:86%; margin-left:auto; margin-right:auto; }

.Cards_2er__Card_1__Typ_1
{
    flex: 1 1 50%; max-width:650px; margin-right:2vw; border:1px solid #aaaaaa;
    background-color:#ffffff; /* ### T-ACK #112 ### */
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.07); 
}
.Cards_2er__Card_2__Typ_1
{
    flex: 1 1 50%; max-width:650px; margin-left:2vw; border:1px solid #aaaaaa; 
    background-color:#ffffff; /* ### T-ACK #112 ### */
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.07);
}

/* --------------------- Typ 2 --------------------- */
.Cards_2er__FlexBox__Typ_2
{ display:flex; justify-content: center; width:86%; margin-left:auto; margin-right:auto; }

.Cards_2er__Card_1__Typ_2,
.Cards_2er__Card_2__Typ_2

{
    flex: 1 1 50%; max-width:450px; margin-right:2vw; /* border:1px solid #aaaaaa; */
    background-color:#242b38; /* ### T-ACK #112 ### */
    box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.2); 
    color:#d0d0d0;
    border-radius: 20px 20px 20px 20px;  /* Radius sollte oben groesser sein als der des Card-Headers, andernfalls sind Ränder zu sehen, wenn beide Flächen unterschiedliche Farben haben */ 
}




/* =============================================================================================================== */
/*                                                Card-Header + Content                                            */
/* =============================================================================================================== */

.Cards_2er__Header__Typ_1, 
.Cards_1er__Header__Typ_1
{
    padding:8%; padding-top:3.5%; padding-bottom:2%;  
    background-color:#f1f1f1;
    color:#373737; font-weight:500;

    font-size: min(calc(16px + 0.3vw), 24px); /* ### T-ACK #119 ### */
}

.Cards_2er__Header__Typ_2, 
.Cards_1er__Header__Typ_2
{
    padding: 4% 8% 3% 4%;
    /*background-color:#4b5361;*/
    color:#ffffff; font-weight:500;

    font-family: var(--font_3);
    font-size: min(calc(16px + 0.3vw), 25px); /* ### T-ACK #119 ### */
    border-radius: 15px 0px 0px 0px;
    
    text-align: center;
}


/* ............................................... */

.Cards_2er__ImgDiv__Typ_1, 
.Cards_1er__ImgDiv__Typ_1
{ 
  padding:8%; padding-top:5%; padding-bottom:5.2%; border-top:1px solid #bbbbbb; 
  background-color:#f9f9f9;
}

.Cards_2er__ImgDiv__Typ_2, /* ### T-ACK #113 !!! ### */
.Cards_1er__ImgDiv__Typ_2  /* ### T-ACK #113 !!! ### */
{ 
  padding:8%; padding-top:5%; padding-bottom:5.2%; border-top:1px solid #bbbbbb; 
  background-color:#d4e8fb;
}

.Cards_2er__ImgDiv__Typ_3, /* ### T-ACK #113 !!! ### */
.Cards_1er__ImgDiv__Typ_3  /* ### T-ACK #113 !!! ### */
{ 
  border-top:1px solid #888888; border-bottom:1px solid #888888;
}

/* ............................................... */

.Cards_2er__Fliesstext__Typ_1, 
.Cards_1er__Fliesstext__Typ_1 
{ 
    padding: 6% 8% 6% 8%; /* border-top:3px solid #000000; */
    /* BG-Color steht im Style des Items!  ### T-ACK #112 ### */
       
    font-size: min(calc(12px + 0.3vw), 22px); /* ### T-ACK #119 ### */
    font-family: var(--font_1);
    
    text-align: center;
}




/* ------------------------------------------------------------------------------------------------------------ */
/*                                   Internet-Explorer (### T-ACK #119  ###)                                  */
/* ------------------------------------------------------------------------------------------------------------ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
    .Cards_Img_Beschriftung { font-size: calc(13px + 0.1vw); } 
    .Cards_2er__Header__Typ_1, .Cards_1er__Header__Typ_1 { font-size: calc(16px + 0.3vw); } 
    .Cards_2er__Fliesstext__Typ_1, .Cards_1er__Fliesstext__Typ_1 { font-size: calc(13px + 0.3vw); } 
}


/* ------------------------------------------------------------------------------------------------------------ */
/*                        Style-Ueberschreibungen fuer mobile (Umbruch auf eine Spalte)                         */
/* ------------------------------------------------------------------------------------------------------------ */

/* ######## ACK #001 ########  */ 

@media only screen and (min-width: 1px) and (max-width: 750px) 
{
    .Cards_2er__FlexBox__Typ_1 
    { 
        width:90%;
        flex-wrap: wrap; /* altmargin-right: auto;ernativ: flex-direction: column; */ 
    }
    
    .Cards_2er__Card_1__Typ_1
    { 
        flex: 0 1 100%;
        margin-left:auto;
        margin-right: auto;
        
        /* ### ACK #002 ###  */
        /*display: block;*/ 
    } 
    
    .Cards_2er__Card_2__Typ_1
    {
        flex: 0 1 100%; 
        margin-left: auto;
        margin-right: auto;
        margin-top:25px;
        
        /* ### ACK #002 ###  */
        /*display: block;*/ 
    }
    
    /* -------------------------------------- */
    
    .Cards_2er__FlexBox__Typ_2 
    { 
        width:90%;
        flex-wrap: wrap; /* alternativ: flex-direction: column; */ 
    }
    
    .Cards_2er__Card_1__Typ_2
    { 
        flex: 0 1 100%; 
        margin-left:auto;
        margin-right: auto;
        
        /* ### ACK #002 ###  */
        /*display: block;*/ 
    } 
    
    .Cards_2er__Card_2__Typ_2
    {
        flex: 0 1 100%; 
        margin-left: auto;
        margin-right: auto;
        margin-top:35px;
        
        /* ### ACK #002 ###  */
        /*display: block;*/ 
    }
    
    /* -------------------------------------- */
    
    
    
    .Cards_1er__RahmenDiv__Typ_1 { width:90%;  }
    
}


