/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->													  6.00/00 - 06-10-23
/* layout	-> startpage														  */
/* file 	-> design/counterup.css												  */
/* ------------------------------------------------------------------------------ */
/* COUNTERUP */
/* use in   -> unternehmen */
/* link     -> https://codepen.io/sarjanahaque/pen/LYOMZpK */
/* ------------------------------------------------------------------------------ */
/* COUNTERUP */
.counterup { 
    padding: 1rem;
    border: 0px solid orangered;
}
#counter {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 1rem;
}
#counter .count-item {
    flex:1;
    max-width:calc(33.33% - 0.67rem);
    margin: 1em 0;
    padding: 0 0 1rem 0;
    text-align:center;
    background:var(--box-bgr-counter);
    border: 1px solid oklch(32.11% 0 0 / 20%); /* var(--box-col-border); */
    border-radius:var(--box-radius);
    box-shadow:var(--box-shadow);
  }
#counter .count-item .count {
    display:flex;
    margin: .4em 0;
    align-items:center;
    justify-content:center;
    font-size: 3.2rem;
    color:var(--color-primary);
}
.count  {
    border: 0px solid orangered;
}
.head-text {
   position:relative;
   top: -12px;
    border:1px solid oklch(32.11% 0 0 / 20%);
    border-width:0 0 1px 0;
}
.add-text {
    padding:0 .8rem;
    font-size:1rem;
    font-weight:400;
    hyphens:none; /*auto;*/
}

@media (max-width: 768px) {
    #counter {
      flex-direction:column;
      align-items:center;
    }
    #counter .count-item {
     flex:1 0 100%;
      max-width:75%;
      margin:1em 0;
    }
  }
/*
@media (max-width: 680px) {
    .counterup {display: none;}
}
*/
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */