/* CARD ANFANG */

.cardgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    align-items: stretch; /* Alle .card gleich hoch */
    justify-content: center;
    row-gap: 2em;
    margin-bottom: 3em;
   }
  
  .cardElement {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 50em;
    flex: 1 1 50em;
    }
  
  .cardElement img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .cardContent {
    display: flex;
    flex-direction: column;
    padding: 16px;
    flex-grow: 1;
  }
  
  .cardContent p {
    flex-grow: 1; /* Nimmt den gesamten freien Raum ein */
    margin: 0 2em 8px 2em;
  }
  
  .cardContent button {
    align-self: center; /* oder center, oder stretch je nach Wunsch */
    padding: 10px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .cardContent button:hover {
    background-color: #0056b3;
  }


.cardElement h2 {
    font-size: 1.6rem;
    position: relative;
    text-align: center;
    padding-top: 1em;
}

.cardElement p {
    position: relative;
    text-align: center;
}

.cardElement ul {
    padding: 0 7em 0 7em;
}

.cardElement h2:after {
    position: absolute;
    top: -2.0em;
    right: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    width: 2.5em;
    height: 2.5em;
    border: .3em solid #fff;
    border-radius: 50%;
    background: #fff url(/client/grafik/icons01.svg) no-repeat 0 0;
    background-size:213px;
    content: ' ';
}


.cardgroup h2 a:link, .cardgroup h2 a:visited {
    color: #0089af;
    text-decoration: none;
}

.cardgroup h2 a:hover, .cardgroup h2 a:focus /* CSS2 */ {
    color: #0089af;
    text-decoration: underline;
    outline:none;
}

.cardgroup .linkbutton a {
    padding: .2em .6em;
    border: 1px solid #424a61;
    color: #424a61;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;  
}

.cardgroup .linkbutton-row {
    padding-top: 2em;
    justify-content: center;
}


/* CARD ENDE */




/* PANEL ANFANG */

.panelgroup{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 5em;
}

.panelElement {
    box-sizing: border-box;
    margin: 0 1em 2.6em 1em;
    padding: 2em;
    max-width: 50em;
    width: 50em;
    border: 1px solid #424a61;
}

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

.panelElementImage {
    float: left;
    margin: -2em 0 4em -2em;
    width: calc(100% + 4em);
    height: 25em;
    background: #424a61;
}


.panelElement h2, .panelElement p {
    position: relative;
    text-align: center;
}


.panelElement h2:after {
    position: absolute;
    top: 7.5em;
    right: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    width: 2.5em;
    height: 2.5em;
    border: .3em solid #fff;
    border-radius: 50%;
    background: #fff url(/client/grafik/icons01.svg) no-repeat 0 0;
    background-size:213px;
    content: ' ';
}

/* Links */

.panelgroup .linkbutton a {
    padding: .2em .6em;
    border: 1px solid #424a61;
    color: #424a61;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;  
}


.panelgroup h2 a:link, .panelgroup h2 a:visited {
    color: #0089af;
    text-decoration: none;
}

.panelgroup h2 a:hover, .panelgroup h2 a:focus /* CSS2 */ {
    color: #0089af;
    text-decoration: underline;
    outline:none;
}


.panelgroup .intern a:link, .panelgroup .intern a:visited {
 box-shadow: 0 0 5px rgba(255, 255, 255, 0);
}

.panelgroup .intern a:hover, .panelgroup .intern a:focus/* CSS2 */  {
     box-shadow: 2px 2px 5px rgba(66, 74, 97, .9);
    outline:none;
}

/* Ende Links */

/* PANEL ENDE */




.kicons01 .intro_div:after {
      background:url(/client/grafik/kicons01.svg) no-repeat 1000px 1000px;
        background-size: 310px;
}


.kicons02 .intro_div:after {
      background: url(/client/grafik/kicons02.svg) no-repeat 1000px 1000px;
        background-size: 310px;
}

.icon01 h2:after {
    background: #fff url(/client/grafik/icons01.svg) no-repeat 0 0;
    background-size:213px;
}

.icon02 h2:after {
    background: #fff url(/client/grafik/icons02.svg) no-repeat 0 0;
    background-size:213px;
}


.pos01 h2:after, .pos01 .intro_div:after  {
    background-position: 0 0
}

.pos02 h2:after, .pos02 .intro_div:after {
    background-position: center 0
}

.pos03 h2:after, .pos03 .intro_div:after {
    background-position: right 0
}

.pos04 h2:after, .pos04 .intro_div:after {
    background-position: right center
}

.pos05 h2:after, .pos05 .intro_div:after {
    background-position: right bottom
}

.pos06 h2:after, .pos06 .intro_div:after {
    background-position: center bottom
}

.pos07 h2:after, .pos07 .intro_div:after {
    background-position: left bottom
}

.pos08 h2:after, .pos08 .intro_div:after {
    background-position: left center
}

.pos09 h2:after, .pos09 .intro_div:after {
    background-position: center center
}

/* PANELNAVIGATION ENDE */

/* kleiner 600px */
@media only screen and (max-width: 600px) {
  
.productcolumn {
    flex-direction: column !important;
}


}

/* größer 800px */
@media only screen and (min-width:800px){
}