/*  CSS-Tabs 2.0 (c) TD-Software
  --tab-titelbg: linear-gradient(160deg,#1577cf,#004482);   Hintergrung Register
  --tab-bg: #f9f9f9;                                        Hintergrund Content
  --tab-bordercolor:#ccc0;
  --InputRadius:5px

<div class="tabs">
 <input type="radio" id="t1" name="t" checked="checked"/><label for="t1">titel1</label>
 <div>Tab1-Content</div>
 <input type="radio" id="t2" name="t" checked="checked"/><label for="t2">titel2</label>
 <div>Tab2-Content</div>
 <input type="radio" id="t3" name="t" checked="checked"/><label for="t3">titel3</label>
 <div>Tab3-Content</div>
</div>
***********************************************************/

.tabs{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;align-content: flex-start;}
.tabs>LABEL{flex: 0 1 auto;}
.tabs>INPUT{position:absolute;margin-left:-10000px;}
.tabs>INPUT+LABEL {display:inline-block;cursor:pointer;z-index: 99;margin-bottom:-2px;
   padding: 10px; padding-left: 20px;	padding-right: 20px;
   border-top-left-radius: var(--InputRadius,5px);border-top-right-radius: var(--InputRadius,5px);border:1px solid silver;
   background:var(--tab-titelbg,linear-gradient(160deg,#1577cf,#004482));
   color: #eee;
}
.tabs>INPUT+LABEL:hover{opacity:0.9;}
.tabs>INPUT:checked+LABEL{
  position: relative;border-bottom: none;
  background: var(--tab-bg,#fff);
  color: #111;
}

.tabs>DIV{display:none; flex: 0 1 auto; width: 100%; order: 99;background: var(--tab-bg,#fff);border:1px solid var(--tab-bordercolor,#ccc);padding:15px;padding-top:20px;min-height:100px;}
.tabs>INPUT:checked+LABEL+DIV{display:block}