@charset "utf-8";
*, ::before, ::after { 
  box-sizing: margin-box; 
}
body{
	/*background-image: url(icons/bg-stars.jpg);*/
	color: #ddd;
	font-family: 'Barlow', sans-serif;
}
h1, h2, h3, h4{
	margin: 0;
	font-family: 'Aldrich', sans-serif;
	color: #eee;
}

a, a:visited{
		color: #eee;
		text-decoration: none;
}
a:hover{
		color: #0db9bf;
		text-decoration: none;
}

div.wrapper{
	margin: 12px auto 12px auto;
	padding: 0;
	max-width: 1400px;
}

/*Member-Head: EVA-Logo, Membername und Tabelle Grund-Daten*/
div.wrapper div.member-head{
	margin: 0;
	padding: 0 0 1em 0;
	width :100%;
	background-color: #023337;
  	border-top-left-radius: 12px;
  	border-top-right-radius: 12px;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 122px 200px; 
  	grid-template-columns:100%;
	grid-template-areas:
		"membername"
		"memberdaten"
	;	
}
div.member-head div.membername{
	margin: 0;
	padding-left: 24px;
	text-align: left;
	font-family: 'Aldrich', sans-serif;
}
div.member-head div.membername img{
	margin: 22px 8px 0 0;
	padding: 0;
	width: 100px;
	height: 36px;
}
div.member-head table.memberdata{
	margin: 44px 0 14px 0;
	min-width: 65%;
	max-width: 100%;
}
div.member-head table.memberdata td.kategorie{
	padding: 4px;
	width: 50%;
	text-align: right;
}
div.member-head table.memberdata td.wert{
	padding: 4px;
	width: 50%;
	text-align: left;
	background-color: rgba(9,143,153,0.1);
}
div.member-head table.memberdata td.kategorie span{
	padding:4px 8px 4px 44px;
	background: rgb(193,193,193);
	background: linear-gradient(90deg, rgba(9,143,153,0) 0%, rgba(9,143,153,0.1) 100%);
}
div.member-head table.memberdata td.wert span{
	padding:4px 0px 4px 8px;
}

/*NAVIGATION oben und unten*/
div.wrapper div.navigation-container{
	margin: 8px 0 0 0;
	padding: 0 0 12px 0;
	width :100%;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: #023337;
	font-family: 'Aldrich', sans-serif;
}
div.navigation-container div.navi-button{
	margin: 9px 0 0 24px;
	padding: 0;
	height: 16px;
	font-size: 1.2em;
	float: left;
}
div.navigation-container div.navi-button img{
	margin: 0 4px 0 0;
	padding: 0;
	height: 15px;
}

/*KARRIERE*/
div.wrapper div.karriere-container{ /*enthält die beiden boxen karriere-sf und karriere-tk*/
	width: 100%;
	margin: 8px 0 0 0;
	padding: 0 0 38px 0;
	background-color: #033B40;
	display: grid;
	grid-gap: 0;
  	grid-template-rows:50% 50%; 
  	grid-template-columns:100%;
	grid-template-areas:
		"karriere1"
		"karriere2"
	;	
}
div.karriere-container div.karriere{/* je tk und sf, enthält u.a. das posige Badge, den Badgometer u. Link zum Soldbuch*/
	margin: 68px 0 0 0;
	padding: 0;
	text-align: center;
}
div.karriere-container div.karriere.tk{/*XS braucht die untere Fraktion mehr Abstand nach oben uns zusätzlich border*/
	margin-top: 52px;
	padding: 66px 0 88px 0;
	border-top: 1px solid #0db9bf;
}
div.karriere-container div.karriere h2{
	font-size: 2.2em;
}
div.karriere-container div.karriere div.poserbadge{/*bunte Box mit Icon, Titel und aktuellen Bucks*/
	margin: 28px auto 0 auto;
	padding: 0;
	width: 90%;
	text-align: center;
	box-shadow: inset 0px 0px 102px #000;
	border: 1px solid #ccc;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}
div.karriere-container div.karriere div.poserbadge img{
	padding: 0;
	margin: 44px 0 22px 0;
	width: 172px;
	height: 158px;
}
.karriere-container div.karriere div.poserbadge h3{
	margin: 0 36px 0 36px;
	padding: 4px 0px;
	text-shadow: 0px 2px 7px rgba(0, 0, 0, 1);
	border: 1px solid #ccc;
}
div.karriere-container div.karriere  h4{
	margin: 12px 0 22px 0;
	padding: 4px 0;
}
div.karriere-container div.karriere  div.poserbadge.reservist{
	background-color: #024045;		
}
div.karriere-container div.karriere.sf div.poserbadge.mannschaft{
	background-color: #046772;
	background: linear-gradient(135deg, rgba(0,0,0,1) 28%, rgba(4,103,114,1) 50%, rgba(0,0,0,1) 72%);		
}
div.karriere-container div.karriere.sf div.poserbadge.unteroffizier{
	background-color: #098f99;
	background: linear-gradient(139deg, rgba(0,0,0,1) 18%, rgba(9,143,153,1) 40%, rgba(9,143,153,1) 60%, rgba(0,0,0,1) 82%);		
}
div.karriere-container div.karriere.sf div.poserbadge.offizier{
	background-color: #0db9bf;
	background: linear-gradient(139deg, rgba(0,0,0,1) 18%, rgba(13,185,191,1) 40%, rgba(13,185,191,1) 60%, rgba(0,0,0,1) 82%);			
}
div.karriere-container div.karriere.tk div.poserbadge.mannschaft{
	background-color: #1f6b38;
	background: linear-gradient(135deg, rgba(0,0,0,1) 28%, rgba(31,107,56,1) 50%, rgba(0,0,0,1) 72%);			
}
div.karriere-container div.karriere.tk div.poserbadge.unteroffizier{
	background-color: #298c4a;
	background: linear-gradient(135deg, rgba(0,0,0,1) 28%, rgba(41,140,74,1) 50%, rgba(0,0,0,1) 72%);			
}
div.karriere-container div.karriere.tk div.poserbadge.offizier{
	background-color: #54a66f;	
	background: linear-gradient(139deg, rgba(0,0,0,1) 18%, rgba(41,140,74,1) 40%, rgba(41,140,74,1) 60%, rgba(0,0,0,1) 82%);
}

/*BADGOMETER Titelbereich, Skalen und Fortschrittsanzeige*/
div.karriere-container div.karriere div.badgometer{
	margin:66px auto 0 auto;
	padding:20px 0 38px 0;
	width: 90%;
	background-color: #023337;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	border-left: 4px solid rgba(13,185,191,0.4);
}
div.badgometer div.badgometer-head{
	margin: 0;
	padding: 0 0 0 4%;
	width: 100%;
	text-align: left;
	opacity: 0.7;
}
div.badgometer div.badgometer-head span.bucks{
	font-weight: bold;
}
div.badgometer div.next-badge{
	margin: 11px 0 0 0;
	padding: 0;
	width: 100px;
	height: 92px;
	float: left;
}
div.badgometer div.next-badge img{
	margin: 0;
	padding: 0;
	width: 100px;
	height: 92px;
}
div.badgometer div.next-titel{
	margin: 23px 0 0 0;
	padding: 0;
	width: 100%;
	text-align: left;
}
div.badgometer div.next-titel h4{
	margin: 0;
	padding: 0;
	font-size: 0.9em;
}

div.badgometer div.fortschritts-container{/* Container um Fortschrittsanzeige für Beschriftung*/
	margin: 24px auto 0 auto;
	padding: 0;
	width: 92%;
	color: #0db9bf;
}
div.badgometer div.fortschritts-container div.titel-skala{ /*display:none auf XS*/
	display: none;
}

div.badgometer div.fortschritts-container div.fortschrittsanzeige{/*XS ohne Beschriftung, nur mit %-Indikator, weniger Padding für kürzere Seitenborder*/
	margin:0;
	padding:0;
	width: 100%;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 2.2em 0.8em 1.3em; 
  	grid-template-columns: 0% 100%;  /*EVA steuert die Colums und schreibt ab 85% nichts mehr in prozent-fehlen & bucks-fehlen*/
	grid-template-areas:
		"prozent-ist" "prozent-fehlen"
		"indikator-ist" "indikator-fehlen"
		"bucks-ist" "bucks-fehlen"
	;
}
div.fortschritts-container div.fortschrittsanzeige div.prozent-ist{
	/*padding: 0 6px 0 0; EVA steuert das mit Blanks*/
	/*margin-left: -1px; dann steht der Balken der Anzeige wirklich bei 0*/
	padding: 0;
	font-size: 1.1em;
	text-align: right;
	border-right: 1px solid #0db9bf;
	color: #bbb;
}
div.fortschritts-container div.fortschrittsanzeige div.prozent-fehlen{
	/*padding: 0 0 0 6px; EVA steuert das mit Blanks*/
	padding: 0;
	font-size: 1.1em;
	text-align: left;
	opacity: 0.4;
}

div.karriere div.fortschritts-container div.fortschrittsanzeige div.indikator-ist{
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(13,185,191,1) 24%, rgba(13,185,191,1) 78%, rgba(0,0,0,1) 100%);
	box-shadow: 0px 0px 12px #0db9bf;
	border-right: 1px solid #0db9bf;
}


div.karriere.tk div.fortschritts-container div.fortschrittsanzeige div.indikator-ist{
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(1,195,135,1) 24%, rgba(1,195,135,1) 78%, rgba(0,0,0,1) 100%);
	box-shadow: 0px 0px 12px #54a66f;
	border-right: 1px solid #298c4a;
}
div.fortschritts-container div.fortschrittsanzeige div.indikator-fehlen{
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(113,4,4,1) 24%, rgba(113,4,4,1) 78%, rgba(0,0,0,1) 100%);
	box-shadow: inset 0px 0px 20px #000;
}
div.fortschritts-container div.fortschrittsanzeige div.bucks-ist{
	/*padding: 0.2em 5px 0.2em 0; EVA steuert das mit Blank*/
	padding: 0.2em 0 0.2em 0;
	font-size: 0.8em;
	text-align: right;
	color: #bbb;
	border-right: 1px solid #0db9bf;
}
div.fortschritts-container div.fortschrittsanzeige div.bucks-fehlen{
	/*padding: 0.2em 0 0.2em 5px; EVA steuert das mit Blank*/
	padding: 0.2em 0 0.2em 0;
	font-size: 0.8em;
	text-align: left;
	opacity: 0.4;
}
div.badgometer div.fortschritts-container div.bucks-skala{
	display: none	;
}


div.soldbuch{
	margin: 62px auto 0 auto;
	height: 14px;
	font-family: 'Aldrich', sans-serif;
	font-size: 1.6em;
}
div.soldbuch img{
	margin: -1px 4px 0 0;
	padding: 0;
	width: 10px;
	height: 13px;
}

/* Footer */
div.footer-container{
	margin: 8px 0 0 0;
	padding: 0 0 12px 0;
	width: 100%;	
	background-color: #023337;
  	border-bottom-left-radius: 12px;
  	border-bottom-right-radius: 12px;
	font-size: 0.7em;
	text-align: center;
	color: #098f99;
	font-family: 'Aldrich', sans-serif;
}
div.footer-container img.logo-eva{
	margin: 44px 0 12px 0;
	padding: 0;
	width: 75px;
	height: 27px;
	opacity: 0.4;
}

@media only screen and (min-width: 780px) {

	.karriere-container div.karriere div.poserbadge h3{
	margin: 0 52px 0 52px;
	padding: 4px 0;
}
div.karriere-container div.karriere div.badgometer{
	padding:24px 0 18px 0;
}
div.badgometer div.next-titel h4{
	margin: 0;
	padding: 0;
	font-size: 1em;
}
div.badgometer div.fortschritts-container div.titel-skala{ /*display:none auf XS*/
	display: block;
	margin:0;
	padding:0;
	width: 100%;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 0.8em; 
  	grid-template-columns: 50% 50%;
	grid-template-areas:
		"titel-ist" "titel-wird"
	;
}
div.badgometer div.fortschritts-container div.titel-skala div.titel-ist{
	padding-top: 0.2em;
	font-size: 0.9em;
	text-align: left;
}
div.badgometer div.fortschritts-container div.titel-skala div.titel-wird{
	font-size: 1em;
	text-align: right;
}
div.badgometer div.fortschritts-container div.fortschrittsanzeige{/*XS ohne Beschriftung, nur mit %-Indikator, weniger Padding für kürzere Seitenborder*/
	margin:12px 0 2px 0;
	padding:8px 0 8px 0;
	width: 100%;
	border-left: 1px solid #0db9bf;
	border-right: 1px solid #0db9bf;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 1.3em 0.8em 1.3em; 
  	grid-template-columns: 0% 100%;  /*EVA steuert die Colums und schreibt ab 85% nichts mehr in prozent-fehlen & bucks-fehlen*/
	grid-template-areas:
		"prozent-ist" "prozent-fehlen"
		"indikator-ist" "indikator-fehlen"
		"bucks-ist" "bucks-fehlen"
	;
}
div.fortschritts-container div.fortschrittsanzeige div.prozent-ist{
	/*padding: 4px 4px 0 0; EVA steuert das mit Blank*/
	padding: 4px 0 0 0; 
	font-size: 0.9em;
	text-align: right;
	border-right: 1px solid #0db9bf;
	color: #bbb;
}
div.fortschritts-container div.fortschrittsanzeige div.prozent-ist, div.fortschritts-container div.fortschrittsanzeige div.bucks-ist{
	margin-left: -1px; /*dann steht der Balken der Anzeige wirklich bei 0*/
}
div.fortschritts-container div.fortschrittsanzeige div.prozent-fehlen{
	/*padding: 4px 0 0 4px; EVA steuert das mit Blank*/
	padding: 4px 0 0 0;
	font-size: 0.9em;
	text-align: left;
	opacity: 0.4;
}
div.badgometer div.fortschritts-container div.bucks-skala{/*display:none auf XS*/
	display: block;
	margin:0;
	padding:0;
	width: 100%;
	font-size: 0.9em;
	opacity: 0.6;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 1em; 
  	grid-template-columns: 50% 50%;
	grid-template-areas:
		"bucks-ist" "bucks-wird"
	;
}
div.badgometer div.fortschritts-container div.bucks-skala div.bucks-start{
	padding-left: 4px;
	text-align: left;
}
div.badgometer div.fortschritts-container div.bucks-skala div.bucks-end{
	padding-right: 4px;
	text-align: right;
}
div.soldbuch{
	font-size: 1.3em;
}
}

@media only screen and (min-width: 1200px) {
	div.member-head table.memberdata{
	margin: 44px 0 0 0;
}
	div.wrapper div.member-head{
	margin: 12px 0 0 0;
	padding: 0 0 1em 0;
	width :100%;
	background-color: #023337;
  	border-top-left-radius: 12px;
  	border-top-right-radius: 12px;
	display: grid; 
	grid-gap: 0;
  	grid-template-rows: 1fr; 
  	grid-template-columns:30% 70%;
	grid-template-areas:
		"membername" "memberdaten"
	;	
}
div.navigation-container div.navi-button{
	margin: 5px 0 0 36px;
	font-size: 1.1em;
}
div.wrapper div.karriere-container{ /*enthält die beiden boxen karriere-sf und karriere-tk*/
	width: 100%;
	margin: 8px 0 0 0;
	padding: 0 0 44px 0;
	background-color: #033B40;
	display: grid;
	grid-gap: 0;
  	grid-template-rows:100%; 
  	grid-template-columns:50% 50%;
	grid-template-areas:
		"karriere1" "karriere2"
	;	
}
div.karriere-container div.karriere.tk{/*XS braucht die untere Fraktion mehr Abstand nach oben*/
	margin-top: 68px;
	padding: 0;
	border-top: none;
}
div.karriere-container div.karriere h2{
	font-size: 1.8em;
	opacity: 0.8;
}
div.karriere-container div.karriere div.badgometer{
	padding:22px 0 18px 0;
}
div.badgometer div.fortschritts-container div.titel-skala{ /*display:none auf XS*/
	opacity: 0.6;
}
div.badgometer div.fortschritts-container div.titel-skala div.titel-ist{
	font-size: 0.7em;
	text-align: left;
}
div.badgometer div.fortschritts-container div.titel-skala div.titel-wird{
	font-size: 0.8em;
	text-align: right;
}

div.badgometer div.fortschritts-container div.fortschrittsanzeige{/*XS ohne Beschriftung, nur mit %-Indikator, weniger Padding für kürzere Seitenborder*/
	margin:5px 0 0 0;
	padding:5px 0 5px 0;
	width: 100%;
	border-left: 1px solid #0db9bf;
	border-right: 1px solid #0db9bf;
	display: grid;
	grid-gap: 0;
  	grid-template-rows: 1.3em 0.8em 1.3em; 
  	grid-template-columns: 0% 100%;  /*EVA steuert die Colums und schreibt ab 85% nichts mehr in prozent-fehlen & bucks-fehlen*/
	grid-template-areas:
		"prozent-ist" "prozent-fehlen"
		"indikator-ist" "indikator-fehlen"
		"bucks-ist" "bucks-fehlen"
	;
}


div.soldbuch{
	font-size: 1.1em;
}
}
div.clearfix{
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	clear: both;
}