@charset "utf-8";

/* CSS für die Tabs */
/* Source: https://webdevtrick.com/pure-css-tabs-responsive/ */

.tabs {
   display: flex;
   flex-wrap: wrap;
}

.tabs label {
   order: 1;
   display: block;
   padding: 0.7rem 1.4rem;
   margin-right: 0.3rem;
   cursor: pointer;
   background:  #FFFFFF;
   font-weight: bold;
   transition: background ease 0.2s;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
   border-radius: 5px 5px 0px 0px;
   /* border-style: solid; */
   /* border-width: 1px 1px 1px 1px; */
}

.tabs .tab {
   order: 99;
   flex-grow: 1;
   width: 100%;
   display: none;
   padding: 1rem;
   background: #fff;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
   border-radius: 0px 0px 9px 9px;
   min-height: 500px;
   /* border-style: solid; */
   /* border-width: 1px 1px 1px 1px; */
}

.tabs input[type="radio"] {
   display: none;
}

.tabs input[type="radio"]:checked + label {
   background: var(--ammoscout-main-color);
   color: #FFFFFF;
}

.tabs input[type="radio"]:checked + label + .tab {
   display: block;
}

@media (max-width: 45em) 
{
   .tabs .tab,
   .tabs label 
   {
      order: initial;
   }

   .tabs label 
   {
      width: 100%;
      margin-right: 0;
      margin-top: 0.0rem;
   }
}