/* Tabs mit radio-Buttons */

div.tabbed {
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    height: 100%;
}

.tabbed figure { 
    display: block; 
    height: 95%;
    margin-left: 0; 
    clear: both;
    border: none;
 }
 
 .tabbed > input,
 .tabbed figure > div { display: none; }
 
 .tabbed figure>div {
   padding: 20px;
   width: 100%;
   height: 100%;
   background: #fff;
   line-height: 1.5em;
   letter-spacing: 0.3px;
   color: #444;
   border-radius: 6px;
 }

#tab1:checked ~ figure .tab1,
#tab2:checked ~ figure .tab2,
#tab3:checked ~ figure .tab3 { display: block; }

nav {
    display: flex;
    justify-content: center;
}

nav label {
    float: left;
    padding: 15px 15px;
    cursor: pointer;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    background: var(--education-blue);
    color: #111;
 }
 
 nav label:hover { background: var(--education-blue-strong); }
 nav label:active { background: #ffffff; }
 
 #tab1:checked ~ nav label[for="tab1"],
 #tab2:checked ~ nav label[for="tab2"],
 #tab3:checked ~ nav label[for="tab3"] {
   background: var(--education-blue-strong);
   color: #111;
   position: relative;
   border-bottom: none;
 }
 
 #tab1:checked ~ nav label[for="tab1"]:after,
 #tab2:checked ~ nav label[for="tab2"]:after,
 #tab3:checked ~ nav label[for="tab3"]:after {
   content: "";
   display: block;
   position: absolute;
   height: 2px;
   width: 100%;
   left: 0;
   bottom: -1px;
 }